A simple drawing demo in javascript

Source: Internet
Author: User

This is a simple drawing application implemented on canvas using javascript. You can draw images in the following area using a html5-supported Browser:

Your browser does not support canvas!

The function is very simple. The principle is similar to that of drag-and-drop. There are mainly three events:

1. Bind The mousedown event to the canvas to mark the start of the painting (call moveTo to move the paint brush)

2. Bind The mousemove event to the document to process the painting behavior (call lineTo and stroke for painting)

3. Bind The mouseup event on the document to mark the end of the painting (unbind two events on the document)

Note how to pass the correct coordinate value when calling the moveTo and lineTo methods. The coordinate value should be the offset of the cursor relative to the upper left corner of the canvas, when obtaining the image, you need to consider the position of the canvas relative to the current view. The getBoundingClientRect method is useful (this method should be implemented by browsers that support HTML5). Finally, the clientX of the event object is used, clientY minus left and top returned by the getBoundingClientRect method.

In this way, a simple mouse painting function is completed, and there are also shortcomings, such as the inability to draw points... I personally think it is still relatively weak to use canvas for drawing, and complicated functions are not very easy to implement. However, you can try to add a method to save the image, for example, define Draw. prototype. save = function (){...}, you can call the toDataURL method.

Here is a good HTML5 canvas tutorial for beginners to learn ~

The source code is attached:

<! DOCTYPE html>



<Meta charset = "UTF-8"/>

<Title> draw demo </title>




<Canvas id = "the_stage" width = "600" height = "400" style = "border: 1px solid #999;"> canvas is not supported in your browser! </Canvas>



Function Draw (arg ){

If (arg. nodeType ){

This. canvas = arg;

} Else if (typeof arg = 'string '){

This. canvas = document. getElementById (arg );

} Else {



This. init ();


Draw. prototype = {

Init: function (){

Var that = this;

If (! This. canvas. getContext ){



This. context = this. canvas. getContext ('2d ');

This. canvas. onselectstart = function (){

Return false; // fixed the cursor style issue in chrome.


This. canvas. onmousedown = function (event ){

That. drawBegin (event );



DrawBegin: function (e ){

Var that = this,

Stage_info = this. canvas. getBoundingClientRect ();

Window. getSelection? Window. getSelection (). removeAllRanges ():

Document. selection. empty (); // clear the selected text

This. context. moveTo (

E. clientX-stage_info.left,

E. clientY-stage_info.top


Document. onmousemove = function (event ){

That. drawing (event );


Document. onmouseup = this. drawEnd;


Drawing: function (e ){

Var stage_info = this. canvas. getBoundingClientRect ();

This. context. lineTo (

E. clientX-stage_info.left,

E. clientY-stage_info.top


This. context. stroke ();


DrawEnd: function (){

Document. onmousemove = document. onmouseup = null;



Var draw = new Draw (the _ stage ');




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.