Skip to content
Sample sketch app using HTML5 Canvas that demonstrates lineTo drawing techniques, as well as brush images.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
README

README

Sample application demonstrating a drawing application/sketch techniques for HTML5 Canvas elements.  

You can read full details how this works at:
http://www.tricedesigns.com/2012/01/04/sketching-with-html5-canvas-and-brush-images

*lineTo(x,y)*********************************************************
The first technique uses the canvas's drawing context moveTo(x,y) and lineTo(x,y) to draw line segments that correspond to the mouse/touch coordinates.   Think of this as playing "connect the dots" and drawing a solid line between two points.

*brush images********************************************************
The technique for using brush images is identical in concept to the previous example - you are drawing a line from point A to point B.  However, rather than using the built-in drawing APIs you are programmatically repeating an image (the brush) from point A to point B.

*********************************************************************

Both the lineTo.html and brush.html apps use the exact same code, which just uses a separate rendering function based upon the use case.    Feel free to try out the apps on your own using an iPad or in a HTML5 Canvas-capable browser:

lineTo sketch: http://tricedesigns.com/portfolio/sketch/lineTo.html
brush sketch:  http://tricedesigns.com/portfolio/sketch/brush.html

*********************************************************************

This sample uses jQuery and Modernizr libraries
You can’t perform that action at this time.