DrawingWithJavaScript

A JS Utility to make html canvas art

Usage

• Download the repo as zip
• Extract the files
• Open index.html
• Located and edit the draw() function

To hide the grid, make sure to comment out the following line in index.html:

drawGrid();

To associate the grid with your canvas, make sure the variable __ is assigned the correct ID of your canvas, either by re-declaring it in index.html or editing canvasDrawJs.js. For example:

var canvasID = "canvas"; 

To control the size of the grid, override the size variable, either by re-declaring it in index.html or editing canvasDrawJs.js. For example:

var size = 40;

To change the color of the grid, override the gridColor variable, either by re-declaring it in index.html or editing canvasDrawJs.js. For example

var gridColor = "red";

Example Output

After downloading the example, you should see the something similar to this:

To see the X,Y coordinates as you click the mouse, enable the console output. For example:

More Info

• You may darw using any canvas methods as listed at the W3Schools Canvas Refrence