ezcanvas

ezCanvas library

Tiny library made to simplify the use of HTML5 canvas 2D.

Features

HTML5 canvas is a great tool for playing with 2D graphics in the browser, but some common tasks can become wonky when it comes to code.

example : draw a line from the bottom of the canvas to it's center

vanilla JS :

  let canvas  = document.createElement('canvas'),
      context = canvas.getContext('2d');
 
  let centerX = canvas.width/2,
      centerY = canvas.height/2;
 
  document.body.appendChild(canvas);
 
  context.beginPath();
  context.moveTo(centerX, canvas.height);
  context.lineTo(centerX, centerY);
  context.strokeStyle = 'blue';
  context.lineWidth = 4;
  context.stroke();

ezCanvas :

  let canvas = new ezCanvas(480, 320);
  canvas.line(canvas.center().x, canvas.height(), canvas.center().x, canvas.center().y, 4, 'blue');

Voilà !

Progress

ezCanvas is a library created for my own use, as I find some needs to lighten the vanilla canvas syntax. Therefore, this library is far from being completed and I will keep adding new features whenever I feel the need to.

Feel free to send suggestions or contribute to the developement. I'm a student in the process of learning javascript, any feedback or insight will be highly appreciated !