Monday, 30 April 2012

A Simple Paint Program using HTML5 and JavaScript

A Simple Paint Program using HTML5 and JavaScript


hi friends, 
today we are going to create simple paint application in html file using HTML5 & JavaScript (no JQuery) so let's get started
(note : to run this program you have to use modern web browser that support HTML5 because canvas tag only sported by html5).
First of all open any text editor like Notepad or Notepad++, i'm using Notepad++ and save it to "Paint.html" file name than start writing coding

in first line don't forgot to write "<!DOCTYPE html>" tag that identify version of HTML then start html and other necessary tag like <head>,<title> etc. here i'm create simple CSS property for specific element that we are using in application you can also add another tag for customize application

           After creating CSS write code inside body tab here we create on drop down box for option which tools user want to use see like below image


write code for drop down box


after crating drop down box create canvas that where use paint

if browser is not support html5 then problem are created so solving this problem we need to put some code for use simplification here we providing error message to user and give some like for download modern web browser 

now html code is complete just remaining java script so close all remaining tab like body and html put <script> tag before closing body tag

write java script code inside script tag


first of all in java script we need to add event for window when html content is lode in to browse here we create function and some variable for storing value of canvas and tools

then create another one function inside that called "init()"

here store value of over canvas(class="imageView") into canvaso variable then check validation into that  using JavaScript DOM API for html and create tempers canvas


store value of canvas into Canvas variable and put child node as canvas that we are created and store selected tools value in tool_select variable finally attach event handler to canvas for three event "mousedown","mousemove","mouseup" in single function that called ev_canvas 

write code inside ev_canvas find value of X position and Y position of mouse and also update define function for tools changing in drop down box 

for value changing event in drop down box

then write code for particular tools pencil rectedgel and line

for pencil write below code

for rectangle  write below code



for line write below code



finally call init() function then close scope of fuction and close remaining tag like script body and html


your application is ready to run .........................

No comments:

Post a Comment