shape-drawing

A JavaScript package for drawing shape on html canvas element.

Installation

npm install --save shape-drawing

Usage

var createShape = require("shape-drawing").createShape;
 
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
 
var shape = createShape(ctx, {
    lineWidth: 9
});
 
for (var i = 0; i < 13; i++) {
    shape
        .line(30 + 20 * i, 30, 30 + 20 * i, 270)
        .setStrokeStyle(getRandomColor())
        .stroke();
}

Examples

/**
* line
*/
var canvas_line = document.getElementById("canvas_line");
var ctx_line = canvas_line.getContext("2d");
 
var shape_line = createShape(ctx_line, {
   lineWidth: 9
});
 
for (var i = 0; i < 13; i++) {
   shape_line
       .line(30 + 20 * i, 30, 30 + 20 * i, 270)
       .setStrokeStyle(getRandomColor())
       .stroke();
}

/**
* circle
*/
var canvas_circle = document.getElementById("canvas_circle");
var ctx_circle = canvas_circle.getContext("2d");
 
var shape_circle = createShape(ctx_circle, {
   lineWidth: 3
});
 
for (var i = 0; i < 20; i++) {
   shape_circle
       .circle(Math.random() * 250 + 25, Math.random() * 250 + 25, Math.random() * 20 + 5)
       .setStrokeStyle(getRandomColor())
       .setFillStyle("rgba(255, 255, 255, 0.8)")
       .fill()
       .stroke();
}

/**
* rect
*/
var canvas_rect = document.getElementById("canvas_rect");
var ctx_rect = canvas_rect.getContext("2d");
 
var shape_rect = createShape(ctx_rect, {
   lineWidth: 3
});
 
for (var i = 0; i < 20; i++) {
   var width = height = Math.random() * 40 + 10;
   shape_rect
       .rect(Math.random() * 250, Math.random() * 250, width, height, width * 0.2)
       .setStrokeStyle(getRandomColor())
       .setFillStyle("rgba(255, 255, 255, 0.8)")
       .fill()
       .stroke();
}

/**
* polyline
*/
var canvas_polyline = document.getElementById("canvas_polyline");
var ctx_polyline = canvas_polyline.getContext("2d");
 
var shape_polyline = createShape(ctx_polyline, {
   lineWidth: 8
});
 
shape_polyline
   .setLineCap("round")
   .setLineJoin("round")
   .polyline(50, 50, 100, 250, 220, 280, 250, 220, 140, 140, 220, 80)
   .setStrokeStyle(getRandomColor())
   .stroke();

/**
* polygon
*/
var canvas_polygon = document.getElementById("canvas_polygon");
var ctx_polygon = canvas_polygon.getContext("2d");
 
var shape_polygon = createShape(ctx_polygon, {
   lineWidth: 8
});
 
shape_polygon
   .setLineJoin("round")
   .polygon(50, 50, 100, 250, 220, 280, 250, 220, 140, 140, 220, 80)
   .setStrokeStyle(getRandomColor())
   .setFillStyle("rgba(0, 0, 0, 0.2)")
   .fill()
   .stroke();