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.
<canvas id="canvas"></canvas>
<script src="draw.js"></script>
setBGCOLOR(GREEN);
setFONT('20px Arial');
// 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);
// square(fill, x, y, size, stroke=CLEAR, line=1);
square(BLUE, 300, 200, 100);
// 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);
// ellip(fill, x, y, rX, rY, stroke=CLEAR, line=1, rot=0, a1=0, a2=2 * Math.PI);
ellip(BROWN, 200, 400, 20, 30);
// 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);
// 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');
Author: TheAmeliaMay
Source Code: https://github.com/TheAmeliaMay/drawJS
#javascript