​

$(document).ready(function() {  

​

  var canvas = document.getElementById("mycanvas");  

  var ctx = canvas.getContext("2d");  

​

  //IZQUIERDA

  //1

  ctx.moveTo(100, 0);  

  ctx.lineTo(200, 50);  

  ctx.stroke(); 

  //2

  ctx.moveTo(0, 0);  

  ctx.lineTo(200, 100);   

  ctx.stroke(); 

  //3

  ctx.moveTo(0, 50);  

  ctx.lineTo(200, 150);  

  ctx.stroke();  

  //4  

  ctx.moveTo(0, 100);  

  ctx.lineTo(200, 200);  

  ctx.stroke();  

  //5 

  ctx.moveTo(0, 150);  

  ctx.lineTo(100, 200);  

  ctx.stroke(); 

​

    //DERECHA

    //1

    ctx.moveTo(100, 0);  

    ctx.lineTo(0, 50);  

    ctx.stroke();  

    //2

    ctx.moveTo(200, 0);  

    ctx.lineTo(0, 100);  

    ctx.stroke(); 

    //3

    ctx.moveTo(200, 50);  

    ctx.lineTo(0, 150);  

    ctx.stroke();  

    //4  

    ctx.moveTo(200, 100);  

    ctx.lineTo(0, 200);  

    ctx.stroke();  

    //5 

    ctx.moveTo(200, 150);  

    ctx.lineTo(100, 200);  

    ctx.stroke(); 

​

​

}); 

​