Wednesday, September 5, 2012

Draw Something JS - Part #1

This is my first post, so please be gentle with your comments :) 
Today, You are going to see the power of HTML5 and Javascript and I’m going to show you, step by step, how to create the Great DrawSomething application in Javascript.

DrawSomething JS



Ready?!?! so lets go.

The first thing we’re going to learn is how to draw inside your browser:

HTML5 has a new element called Canvas, to add a canvas inside your html, you just need to copy this code inside the html page:

<canvas id=”board” class=”board” ></canvas>

To draw inside this canvas with the mouse, we need to listen to three mouse events:
  • mousedown - to start drawing the line
  • mousemove - to continue drawing the line
  • mouseup - to stop drawing the line
var board = document.getElementById(“board”);
board.addEventListener(“mousedown”,startPaintWithMouse,false);
board.addEventListener(“mousemove”,movePaintWithMouse,false);
board.addEventListener(“mouseup”,stopPaintWithMouseUp,false);
Here are the methods implementation:
var startPaintWithMouse = function(event) {
    brushCtx = board.getContext(‘2d’); // get the context of the canvas
    brushCtx.beginPath();
    brushCtx.lineWidth = lineWidth; // set line width from variable
    brushCtx.strokeStyle = color; // set line color from variable
    brushCtx.moveTo(event.offsetX,event.offsetY); // start drawing from this point
};
var movePaintWithMouse = function(event) {
    if (mouseState == 1) {
        event.preventDefault();
        brushCtx = board.getContext(‘2d’);
        brushCtx.lineTo(event.offsetX,event.offsetY); // go to this point and draw
        brushCtx.stroke(); // stroke the line
    }
};
var stopPaintWithMouseUp = function(evet) {
    mouseState = 0; // set mouse state to 0 to stop the draw
};

Now, just add the buttons that change the line width and color and start to draw inside the html5 canvas element.
In the next post, We will learn how to record the user movements and to play it, just like the DrawSomething app.

11 comments:

  1. That is a good thing. I hope I could use it freely, nevertheless, its modifications are too complicated to me.

    ReplyDelete
  2. Each element is important in this structure of the code. We need to draw the clean lines to create the desired application.

    ReplyDelete
  3. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or learn thru JavaScript Online Training India. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai

    ReplyDelete
  4. I learn from a good blog, your blog I have a great inspiration, thank you. Send Gifts To Pakistan

    ReplyDelete
  5. a pride for me to be able to discuss on a quality website because I just learned to make an article on
    cara menggugurkan kandungan

    ReplyDelete
  6. I would like to learn how to record the user movements and to play this game. It must be exciting!

    ReplyDelete
  7. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.

    aws training in chennai

    advanced aws training in chennai

    ReplyDelete
  8. AWS Training in Bangalore - Live Online & Classroom
    myTectra Amazon Web Services (AWS) certification training helps you to gain real time hands on experience on AWS. myTectra offers AWS training in Bangalore using classroom and AWS Online Training globally. AWS Training at myTectra delivered by the experienced professional who has atleast 4 years of relavent AWS experince and overall 8-15 years of IT experience. myTectra Offers AWS Training since 2013 and retained the positions of Top AWS Training Company in Bangalore and India.

    IOT Training in Bangalore - Live Online & Classroom
    IOT Training course observes iot as the platform for networking of different devices on the internet and their inter related communication. Reading data through the sensors and processing it with applications sitting in the cloud and thereafter passing the processed data to generate different kind of output is the motive of the complete curricula. Students are made to understand the type of input devices and communications among the devices in a wireless media.

    ReplyDelete