A Pen by sinrise.

Canvas-Repeating-Background-Image-Pattern.markdown

Canvas Repeating Background Image Pattern

This is my first experiment with Canvas and getting to draw a pattern image as a background and it works beautifully.

A Pen by sinrise on CodePen.

License.

index.html

<canvas id="haz-pat" width="72" height="144"></canvas>
<canvas id="hazards" width="800"></canvas>

script.js

var canvas = document.getElementById("haz-pat");
var context = canvas.getContext("2d");
            
context.beginPath();
context.moveTo(0,0);
context.lineTo(36, 0);
context.lineTo(0, 36);
context.closePath();
context.fill();
            
context.beginPath();
context.moveTo(72, 0);
context.lineTo(72, 36);
context.lineTo(0, 108);
context.lineTo(0, 72);
context.closePath();
context.fill();
            
context.beginPath();
context.moveTo(72, 72);
context.lineTo(72, 108);
context.lineTo(36, 144);
context.lineTo(0, 144);
context.closePath();
context.fill();

var canvas2 = document.getElementById("hazards");
var context2 = canvas2.getContext("2d");
var myPattern = context2.createPattern(canvas,"repeat");
context2.fillStyle = myPattern;
context2.fillRect(0,0, canvas2.width, canvas2.height);
context2.fill();

style.css

canvas#haz-pat {
 display: none;
}

canvas#hazards {
}