Dibuixar un sobre amb l'etiqueta canvas d'HTML5, amb Javascript

D'una banda, a l'HTML tindrem aquest canvas (tot i que també el podríem crear amb Javascript).

<canvas id="myCanvas" 
  height="100" width="150"
  style="border: 3px solid red;">
  Your browser does not support the HTML5 canvas tag.
</canvas>

I amb Javascript dibuixem el sobre:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(75,50);
ctx.stroke();
var cty = c.getContext("2d");
cty.moveTo(150,0);
cty.lineTo(75,50);
cty.stroke();
var ctz = c.getContext("2d");
ctz.moveTo(0,90);
ctz.lineTo(60,40);
ctz.stroke();
var cta = c.getContext("2d");
cta.moveTo(150,90);
cta.lineTo(90,40);
cta.stroke();

Comentaris