Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 Canvas Brush

Tags:

html

canvas

I have searched the web and found no answer. I want to draw lines on an HTML5's canvas element but having a texture that is not solid, rather custom. Just like brushes in Photoshop if you know them. For example, to have a line that looks like it was drawn with chalk or artist paint brush. Do you know a way to do it?

like image 516
Sonia Avatar asked May 20 '11 06:05

Sonia


People also ask

What is canvas in HTML5?

HTML5 Canvas. ❮ Previous Next ❯. The HTML <canvas> element is used to draw graphics on a web page. The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text. The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

How do you draw on canvas in HTML?

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript. The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

How do I create a canvas table in paintbrush?

In the PaintBrushCanvas.aspx page, we have a table with two columns: one is for the Toolbox [left] and the other for the Canvas [right]. The Canvas should be put inside a container <div id="container"> with position, overflow, and scrollbar-base-color styles defined.

What are the 4 elements of canvas?

It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text. What is HTML Canvas? The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.


2 Answers

Why don't you use croquis.js?

It has neat brush implementation like photoshop :)

And here is Demo which is using croquis.js.

brush-preview

like image 50
Jong-Chan Choi Avatar answered Oct 12 '22 11:10

Jong-Chan Choi


Have you considered using libraries such as Processing.js or Fabric.js?

You can also take a look at this blog entry that might be interesting for you:

http://rhyolight.posterous.com/new-brushes-for-harmony-canvas-app

If you want to develop everything from scratch you should put a lot of effort into it!

like image 34
BFil Avatar answered Oct 12 '22 11:10

BFil