Need help with HTML5-Canvas-Brush-Sketch?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

triceam
131 Stars 35 Forks 3 Commits 3 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

# 52,343
JavaScr...
visual-...
vscode
Visual ...
3 commits

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.