Programación Web: Canvas

  • La etiqueta <canvas> permite dibujar gráficos en la página web. Requiere de insertar la etiqueta en la estructura HTML y de código Javascript:
<canvas id="canvas" width="200" height="200" style="border: 1px solid black"></canvas> #HTML
  • var canvas = document.getElementById("canvas");
  • var ctx = canvas.getContext("2d");
  • ctx.strokeStyle = "red";
  • ctx.moveTo(0, 0);
  • ctx.lineTo(200, 100);
  • ctx.stroke();
  • ctx.fillStyle = "blue";
  • ctx.fillRect(10, 10, 85, 85);
  • ctx.drawImage(imagen, 0, 0, width, height);
  • ctx.createImageData(width, height);
  • ctx.clearRect(0,0, canvas.width, canvas.height)
  • ctx.transform(1, 0, 0, -1, 0, canvas.height);