HTML5 canvas тагът дава възможност за изобразяване на вектор без да се налага използването на плъгини като Flash, за да се видят в браузъра.

За да опозная начините на изрисуване на изображения, реших да нарисувам Льольо с цифрички и JavaScript методи.

За целта се иска единствено да използвате canvas тага, а останалата магия идва от JavaScript-а. Не е кой знае каква философия да се рисува по този начин, просто трябва да имате железни нерви и да целите пикселите. Естествено, има и много по-лесни начини, но друго си е човек да научи какво точно се случва, за да се получи подобно изображение.

JavaScript:

$(document).ready(function() {
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  /**
   * Bezier Curve
   */ 
   var bcX1 = 160,
       bcY1 = 180,
       bcX2 = 210,
       bcY2 = 170,
       bcEndX = 190,
       bcEndY = 250;
   context.moveTo(200, 130);
   context.bezierCurveTo(bcX1, bcY1,
                         bcX2, bcY2,
                         bcEndX, bcEndY);
   context.lineWidth = 7;
   context.stroke();
   context.bezierCurveTo(180, 330,
                         300, 350,
                         350, 270);
    context.moveTo(350, 110);
    context.bezierCurveTo(330, 180,
                          200, 180,
                          180, 100);
    context.stroke();
    context.bezierCurveTo(170, 40,
                         200, 40,
                         230, 25);
    context.stroke();
    // hair
    context.lineTo(250, 60);
    context.stroke();
    context.lineTo(300, 30);
    context.stroke();
    context.lineTo(310, 70);
    context.stroke();
    context.lineTo(340, 50);
    context.stroke();
    context.lineTo(360, 70);
    context.stroke();
    context.lineTo(380, 50);
    context.stroke();
    context.bezierCurveTo(460, 160,
                         400, 250,
                         345, 275);
    context.stroke();
    // whiskers
    context.moveTo(330, 140);
    context.bezierCurveTo(350, 160,
                          370, 200,
                          350, 250);
    context.stroke();
    context.moveTo(355, 210);
    context.quadraticCurveTo(400, 220,
                          350, 245);
    context.stroke();
 
    // nose
    context.moveTo(240, 230);
    context.lineWidth = 5;
    context.quadraticCurveTo(240, 210,
                          260, 230);
    context.stroke();
    // mouth
    context.moveTo(270, 260);
    context.lineWidth = 5;
    context.quadraticCurveTo(290, 270,
                          290, 250);
    context.stroke();
   
    // eyes
    context.beginPath();
    context.arc(280, 210, 4, 0, 3 * Math.PI, false);
    context.stroke();
    context.beginPath();
    context.arc(220, 210, 4, 0, 3 * Math.PI, false);
    context.stroke();
});