Skip to content

Sample sketch app using HTML5 Canvas that demonstrates lineTo drawing techniques, as well as brush images.

Notifications You must be signed in to change notification settings

triceam/HTML5-Canvas-Brush-Sketch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 

Repository files navigation

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

About

Sample sketch app using HTML5 Canvas that demonstrates lineTo drawing techniques, as well as brush images.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published