fakt309 / easycanvas

JAVASCRIPT library with which you can easily draw CANVAS HTML

easycanvas

Quick start

Documentation: gaidadei.ru/easycanvas
Download: gaidadei.ru/easycanvas/easyc.zip

Buy premium: gaidadei.ru/easycanvas/premium (Absolutely no different from the free version, but you have the right to change the file name to "easyc.premium.js")

Download the file easyc.js and use this code:

<canvas id="canvas"></canvas>

<script src="easyc.js"></script>

<script>
  var canvas = document.getElementById("canvas");

  var sheet = new EasyC(canvas, [{
    type: "circle",
    radius: 50,
    x: 100,
    y: 100,
    fill: "#000"
  }]);
  sheet.draw();
</script>

Very easy way to draw

Just add a simple object and the library will draw it (for example: "circle", "triangle", "rectangle", "shape", "text", "image").

new EasyC(canvas, [
{
  type: "circle",
  x: 100,
  y: 100,
  radius: 50,
  fill: "#999"
}, {
  type: "triangle",
  x: 100,
  y: 100,
  angleLeft: 1.5*Math.PI/4,
  angleRight: 1*Math.PI/4,
  base: 150,
  fill: "#999"
}, {
  type: "rectangle",
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  fill: "#999"
}, {
  type: "shape",
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  corners: [
    [-1, -1],
    [0, -0.5],
    [0.2, -0.7],
    [0.4, -0.1],
    [-0.2, 1],
    [-0.8, 0.4]
  ],
  fill: "#999"
}, {
  type: "text",
  x: 100,
  y: 100,
  value: "Hello, world\nSecond stroke\nThird stroke",
  font: "Arial",
  size: 36,
  align: "left",
  fill: "#999"
}, {
  type: "image",
  x: 280,
  y: 260,
  width: 150,
  src: "2.png",
  scale: [1, 1]
}]).draw();

You can load images and fonts very easily, just provide the url.

src: "2.png"  
font: "url(ShareTechMono.ttf)"
fill: "url(2.png), 0, 0.2, repeat"

Very easy make gradient

fill: "grad(linear, 45, 0 #0000ff, 1, #00ff00)"
fill: "grad(radial, 0, #0000ff, 1, #00ff00)"

You can set relative and absolute coordinate object.

relative: false

relative: true