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.

34 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. I would like to learn how to record the user movements and to play this game. It must be exciting!

    ReplyDelete
  4. Vest Nice blog for learning new things,thanks for such beautiful blog.
    below some new idea plz check once.
    kajal agarwal hot

    ReplyDelete
  5. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.
    microsoft azure training in bangalore
    rpa training in bangalore
    rpa training in pune
    best rpa training in bangalore

    ReplyDelete
  6. This blog is the general information for the feature. You got a good work for these blog.We have a developing our creative content of this mind.Thank you for this blog. This for very interesting and useful.
    python Course in Pune
    python Course institute in Chennai
    python Training institute in Bangalore

    ReplyDelete
  7. I’ve found extensive lists before, but none this informative. Thanks for sharing!

    For more details Click Here- SAP Training in Bangalore

    ReplyDelete
  8. I finally found great post here.I will get back here. I just added your blog to my bookmark sites. thanks.Quality posts is the crucial to invite the visitors to visit the web page, that's what this web page is providing.

    Data Science Course

    ReplyDelete
  9. It has fully emerged to crown Singapore's southern shores and undoubtedly placed her on the global map of residential landmarks. I still scored the more points than I ever have in a season for GS. I think you would be hard pressed to find somebody with the same consistency I have had over the years so I am happy with that.

    Data Science Training

    ReplyDelete
  10. Really nice and interesting post. I was looking for this kind of information and enjoyed reading this one. Keep posting. Thanks for sharing.Best data science courses in hyerabad

    ReplyDelete
  11. Thanks for sharing information to our knowledge, it helps me plenty keep sharing…

    Tableau Training in Pune
    Tableau Training Institutes in Pune

    ReplyDelete

  12. Hello! I just wish to give an enormous thumbs up for the nice info you've got right here on this post. I will probably be coming back to your weblog for more soon!
    data scientist training in hyderabad

    ReplyDelete




  13. I was basically inspecting through the web filtering for certain data and ran over your blog. I am flabbergasted by the data that you have on this blog. It shows how well you welcome this subject. Bookmarked this page, will return for extra. data science course in jaipur

    ReplyDelete
  14. Die Technologie entwickelt sich schneller denn je und schneller als Sie denken. Diese aufkommende Technologie wird unsere Lebensweise verändern.

    ReplyDelete
  15. I want you to thank for your time of this wonderful read!!! I definately enjoy every little bit of it and I have you bookmarked to check out new stuff of your blog a must read blog!
    business analytics course in hyderabad

    ReplyDelete
  16. This post is very simple to read and appreciate without leaving any details out. Great work!
    business analytics training in hyderabad

    ReplyDelete
  17. CBD products and oils are ideal for treating various conditions. Regardless, different people may not know how to use them to acquire the results. Accepting that you have endeavored CBD ahead of time and dropped by no outcome, read on to learn about the normal blunders you should maintain away from to exploit your product. CBD based products

    ReplyDelete
  18.  
    Search engines like fresh content and a blog site like Bcss8 is an excellent way to provide this. Blogs can be used to discuss your products or services and keep your readers up to date on industry trends. They can also be used to engage your customers and build strong relationships. Besides offering information, blogs can also show authority. A blog provides a more personal way to communicate with your audience and can be a good tool for improving your SEO. bcss8.com

    ReplyDelete
  19. Engaging with your readers through comments and discussions allows you to exchange ideas, gain new perspectives, and expand your knowledge base. The act of continuously learning and sharing knowledge through blogging can on an astoundingly key level impact personal growth and intellectual development. writeic

    ReplyDelete
  20. Obliging your news consumption to your preferences is at the heart of our platform. Re-attempt your news feed by selecting your areas of interest, and receive curated content that matters to you. We really need to ensure you're not overwhelmed by information yet rather empowered by it. theheralddiary

    ReplyDelete
  21. The herald diary goes beyond text. We acknowledge the potency of visual storytelling, so we incorporate multimedia elements, for instance, high-definition images, captivating videos, interactive graphics, and podcasts into our articles. This multimedia strategy adds layers and reverberating to our reporting, making the news burst into life before your eyes.

    ReplyDelete
  22. At the heart of the MagazineHerald lies a commitment to giving high-quality, stunning content that transcends the boundaries of traditional journalism. With a focus on totally reporting, engaging stories, and stunning visuals, each issue of the Magazine Herald is a journey into the realms of arts, culture, science, and lifestyle. magazineherald

    ReplyDelete
  23. The Herald Daily continually offer customization features, allowing readers to tailor their news feed to their interests. This proposes that individuals can follow the topics and authors that matter most to them, ensuring a more personalized news experience. The internet has made the world smaller, and general news blog sites reflect this global perspective.

    ReplyDelete
  24. News Credit has adapted to changing media consumption trends. Different idea multimedia content, including videos, podcasts, and infographics, catering to the preferences of a diverse audience. This adaptability ensures news blog websites stay relevant and engage in an ever-evolving digital landscape.

    ReplyDelete