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