CANVAS 01

Ejemplo canvas

by Ruben Orozco

HTML

<canvas id="lienzo" class="lienzo" width="500" height="500"></canvas>

CSS

.lienzo{
    border: 1px solid;
  }

JavaScript

var canvas = document.getElementById('lienzo');
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.lineWidth = "2";
    ctx.strokeStyle = "#3333dd";
    ctx.moveTo(10, 20);
    ctx.lineTo(490, 20);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.lineWidth = "2";
    ctx.strokeStyle = "#33dd33";
    ctx.arc(100, 50, 20, 0, 2*3.1416, false);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(200, 50, 20, 0, 2*3.1416, false);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(300, 50, 20, 0, 2*3.1416, false);
    ctx.stroke();
    ctx.closePath();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(400, 50, 20, 0, 2*3.1416, false);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.lineWidth = "2";
    ctx.strokeStyle = "#dd3333";
    ctx.rect(10, 90, 200, 100);
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();
    ctx.rect(290, 90, 200, 100);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.lineWidth = "3";
    ctx.strokeStyle = "#888888";
    ctx.moveTo(10, 250);
    ctx.bezierCurveTo(60,120,130,380,170,250);
    ctx.bezierCurveTo(220,120,270,380,320,250);
    ctx.bezierCurveTo(370,120,420,380,470,250);
    ctx.stroke();
    ctx.closePath();

    ctx.beginPath();
    ctx.lineWidth = "4";
    ctx.strokeStyle = "#3333dd";
    ctx.font = '60pt Calibri';
    ctx.textAlign = 'center';
    ctx.strokeText('CANVAS', (canvas.width/2), 400);
    ctx.closePath();