2D Canvas Drawing JavaScript Library – drawJS

Category: Javascript | January 18, 2021
Author: TheAmeliaMay
Views Total: 185 views
Official Page: Go to website
Last Update: January 18, 2021
License: MIT

Preview:

2D Canvas Drawing JavaScript Library – drawJS

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');

You Might Be Interested In:


Leave a Reply