Editor

Pregled code-a:

<!DOCTYPE HTML>
<html lang="hr">
<head>
<meta charset="UTF-8">
<title>CANVAS - clipping path</title>

function init() {
 can = document.getElementById('kan1');
 if (can.getContext) {
  ctx = can.getContext('2d');
  
  // funct loader
  clipMask();
  loadImg('../slike/emma_animated.gif');
  
  
 }
 else document.getElementById('kan11')
              .innerHTML='Vaš browser ne podržava CANVAS tag!';
}

function loadImg(uri) {
 var img = new Image();
  img.src=uri;
 
  img.addEventListener("load", function() {
   ctx.drawImage(img, 10,5);
  });
}

function clipMask() {
 ctx.strokeStyle='green';
 ctx.lineWidth=5;
 ctx.ellipse(350, can.height/2, 100, 60, Math.PI/4, 0, (6/4)*Math.PI, false);
 ctx.stroke();
 ctx.clip();
}

window.onload=init;
 
</script>

</head>
<body>
Kreiranje MASK-inga pomoću metode <b>clip()</b>.<br><br>

<canvas id="kan1" width="500" height="300" style="border:1px solid #DDDDDD;">
 Vaš browser ne podržava CANVAS element!
</canvas>

Pregled stranice:

Pogledaj stranicu ../html/html5canvas/primjeri/65clipping_path.html.