Menu
How do I draw free (using my mouse / fingers) on a canvas element like you can do it in paint with a pencil?
There are a lot of questions that want to achieve free hand drawing on canvas:
So I thought it would be a good idea to make a reference question, where every answer is community wiki and contains a explanation for exactly one JavaScript library / pure JavaScript how to do paint on canvas.
The answers should be community wiki and use the following template:
## [Name of library](Link to project page) ### Simple example A basic, complete example. That means it has to contain HTML and JavaScript. You can start with this: <!DOCTYPE html> <html> <head> <title>Simple example</title> <script type='text/javascript' src='http://cdnjs.com/[your library]'></script> <style type='text/css'> #sheet { border:1px solid black; } </style> <script type='text/javascript'> window.onload=function(){ // TODO: Adjust } </script> </head> <body> <canvas id="sheet" width="400" height="400"></canvas> </body> </html> If possible, this example should work with both, mouse and touch events. [JSFiddle](Link to code on jsfiddle.net) This solution works with: <!-- Please test it the following way: Write "Hello World" Problems that you test this way are: * Does it work at all? * Are lines separated? * Does it get slow when you write too much? --> * Desktop computers: * [Browser + Version list] * Touch devices: * [Browser + Version list] on [Device name] ### Import / Export Some explanations how to import / export user drawn images. ### Line smoothing Explanations about how to manipulate the line the user draws. This can include: * Bézier curves * Controlling thickness of lines 
461
Drawing on the HTML canvas is to be done with JavaScript. Use the HTML DOM Method getElementById () and getContext () before drawing on the canvas. You need to use the getElementById () method to find the canvas element. Use the getContext (), which is drawing object for the canvas.
1 Find the Canvas Element First of all, you must find the <canvas> element. This is done by using the HTML DOM method getElementById (): var canvas = document.getElementById("myCanvas"); 2 Create a Drawing Object Secondly, you need a drawing object for the canvas. ... 3 Draw on the Canvas
@TaylorA.Leach yep, if canvas is not placed in top right corner, you will need to add some offset in setPosition function... Here's the most straightforward way to create a drawing application with canvas: Attach a mousedown, mousemove, and mouseup event listener to the canvas DOM
The getContext () is a built-in HTML object, with properties and methods for drawing: Finally, you can draw on the canvas. The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is black.
<!DOCTYPE html> <html> <head> <title>Simple example</title> <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js'></script> <style type='text/css'> #sheet { border:1px solid black; } </style> <script type='text/javascript'> window.onload=function(){ var canvas = new fabric.Canvas('sheet'); canvas.isDrawingMode = true; canvas.freeDrawingBrush.width = 5; canvas.freeDrawingBrush.color = "#ff0000"; } </script> </head> <body> <canvas id="sheet" width="400" height="400"></canvas> </body> </html> JSFiddle - Demo
canvas.freeDrawingBrush.width.canvas.freeDrawingBrush.color.This solution works with:
Is only possible by serializing the complete canvas, see Tutorial
Is done automatically and it seems not to be possible to deactivate it.
104
answered Oct 17 '22 21:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With