Course notes 29
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Images

Patterns

createPattern(image,type)

This method takes two arguments. Image is either a reference to an Image object or a different canvas element. Type must be a string containing one of the following values: repeat, repeat-x, repeat-y and no-repeat.

var img = new Image();
img.src = 'myMotif.png';
var ptrn = ctx.createPattern(img,'repeat');

(Make sure the image is loaded before calling the createPattern)

 


function draw() {

var ctx = document.getElementById('canvas').getContext('2d');

// create new image object to use as pattern
var img = new Image();
img.src = 'images/wallpaper.png';
img.onload = function(){

// create pattern
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;

ctx.fillRect(0,0,150,150);

}

}