2D Canvas Drawing JavaScript Library – drawJS

Preview:

Description:

drawJS is a JavaScript library that makes it easier to draw text and 2D shapes (like squares, polygons, circles) on HTML5 canvas.

If you want to draw in 3D, check out the three.js JavaScript library.

How to use it:

1. Create an HTML5 canvas element on the page.

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

2. Load the draw.js on the page.

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

3. Set the background of the canvas element. Possible colors:

• CLEAR: ‘#00000000’
• BLACK: ‘#000000’
• WHITE: ‘#FFFFFF’
• RED: ‘#FF0000’
• GREEN: ‘#008000’
• YELLOW: ‘#FFFF00’
• BLUE: ‘#0000FF’
• BROWN: ‘#A52A2A’
• PURPLE: ‘#800080’
• PINK: ‘#FFC0CB’
• ORANGE: ‘#FFA500’
• GRAY: ‘#808080’

setBGCOLOR(GREEN);

4. Set the font styles of the text.

setFONT('20px Arial');

5. Draw a rectangle on the canvas.

// rect(fill, x, y, w, h, stroke=CLEAR, line=1);
// draw a rectangle WITHOUT an outline
rect(ORANGE, 50, 80, 90, 70);
// draw a rectangle WITH an outline
rect(RED, 500, 300, 100, 60, WHITE, 5);

6. Draw a square on the canvas.

// square(fill, x, y, size, stroke=CLEAR, line=1);
square(BLUE, 300, 200, 100);

7. Draw an equilateral or isosceles triangle on the canvas.

// draw an equilateral or isosceles triangle
// tri(fill, x, y, w, h, stroke=CLEAR, line=1);
tri(PINK, 240, 60, 80, 60);
// draw an equilateral triangle
// eqTri(fill, x, y, size, stroke=CLEAR, line=1);
eqTri(PURPLE, 500, 100, 40);
// draw a right triangle
// riTri(fill, x, y, w, h, stroke=CLEAR, line=1);
riTri(WHITE, 150, 300, -50, 60, RED, 2);

8. Draw an ellipse on the canvas.

// ellip(fill, x, y, rX, rY, stroke=CLEAR, line=1, rot=0, a1=0, a2=2 * Math.PI);
ellip(BROWN, 200, 400, 20, 30);

9. Draw a circle on the canvas.

// circ(fill, x, y, size, stroke=CLEAR, line=1);
circ(YELLOW, 600, 100, 30);

10. Draw a polygon on the canvas.

// poly(fill, points, stroke=CLEAR, line=1);
poly(GRAY, [
  [280, 350],
  [310, 360],
  [390, 320],
  [420, 415],
  [400, 420],
  [300, 460],
  [270, 400]
], BLACK);

11. Draw text on the canvas.

// drawTxt(fill, text, x, y, font=FONT, stroke=CLEAR, line=1, align='left', bLine='bottom');
drawTxt(CLEAR, 'Draw.js!', 595, 310, '25px Arial', BLACK, 1, 'right', 'top');