DrawImage - CreatePattern

by giacal

HTML

<canvas></canvas>

JavaScript

var cv = document.querySelector('canvas'),
    ct = cv.getContext('2d');

var img = new Image();
img.src = "http://img339.imageshack.us/img339/377/mareim.jpg";

var cv = document.querySelector('canvas'),
    ct = cv.getContext('2d');

cv.width = 500;
cv.height = 500;

/*ct.drawImage(img,0,0);*/

var pt = ct.createPattern(img, 'repeat');

ct.fillStyle = pt;
ct.beginPath();
ct.arc(220,220,200,0,Math.PI * 2);
ct.fill();
ct.closePath();

ct.fillStyle="Black"; 
ct.beginPath();
ct.moveTo(100,300);
ct.lineTo(300,300);
ct.arcTo(200,350,100,300,100);
ct.lineTo(100,300);
ct.moveTo(200,300);   
ct.lineTo(200,150);
ct.lineTo(300,150);
ct.lineTo(300,170);
ct.lineTo(200,170);
ct.stroke();
ct.fill();
ct.closePath();