Drawing sheet

Hellow....
I was created a drawing sheet using html,and java scritp....!
Use this drawing sheet.

index.html  file:

<DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="utf-8"/>
    <title>My Fst HTML5</title>
    <script src="y.js"></script>
    <link type="text/css" rel="stylesheet" href="main.css"/>
</head>
<body>
    <div id="skin" >
    <div id="buttons">
    Select color:
    <select id="color" >
    <option value="black">Black</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="deeppink">Pink</option>
    <option value="white">White</option>
    </select>
    Select Background color:
    <select id="bgcolor" onchange='doFirst()'>
    <option value="lightgreen">LightGreen</option>
    <option value="pink">Pink</option>
    <option value="cyan">Cyan</option>
    <option value="green">Green</option>
    <option value="Yellow">Yellow</option>
    <option value="black">Black</option>
    </select>
    Select Brush:
    <select id="brush" >
    <option value="defa">Default</option>
    <option value="box">Box</option>
    <option value="bc">BiG_Circle</option>
    <option value="sc">Small_Circle</option>
    <option value="fc">Filled_Circle</option>
    </select>
   
    </div>
    <br/><br/><br/>
        <canvas id="canvas" width="1200px" height="500px"></canvas>
    </div>
</body>
</html>

 and

 y.js file:

function doFirst()
{
    var x=document.getElementById("canvas");
    canvas=x.getContext("2d");
    var co=document.getElementById("bgcolor").value;
    canvas.fillStyle=co;
    canvas.fillRect(0,0,x.width,x.height);
    window.addEventListener("mousemove",bucky,false);
}
function bucky(e)
{
    var co=document.getElementById("color").value;
    var xPos=e.clientX;
    var yPos=e.clientY;
    canvas.fillStyle=co;
    canvas.strokeStyle=co;
    var br=document.getElementById("brush").value;
    canvas.shadowOffsetX=2;
    canvas.shadowOffsetY=2;
    canvas.shadowBlur=4;
    canvas.shadowColor='black';
    canvas.font="bold 10px URW Chancery L";
    canvas.textAlign="end";
    if(br=='defa')
    {
         canvas.fillRect(xPos-93,yPos-100,7,7);
         return;
    }
    if(br=="box")
    {
        canvas.strokeRect(xPos-93,yPos-100,7,7);
        return;
    }
    if(br==="bc")
    {    canvas.beginPath();
        canvas.arc(xPos-100,yPos-80,40,0,2*Math.PI);
        canvas.stroke();
        return;
    }
    if(br=="sc")
    {
        canvas.beginPath();
        canvas.arc(xPos-90,yPos-90,10,0,2*Math.PI);
        canvas.stroke();
        return;
    }
    if(br="fc")
    {
        canvas.beginPath();
        canvas.arc(xPos-90,yPos-90,10,0,2*Math.PI);
        canvas.fill();
        return;
    }
    //canvas.fillText("O",xPos-180,yPos);
    //canvas.strokeRect(xPos-180,yPos-10,10,10);
}
window.addEventListener('load',doFirst,false);

 and

main.css file

body{
    text-align:center;
    }
header,section,footer,aside,nav,article,hgroup{
    display:block;
}
#skin
{
    font-family:Droid Serif;
   
}

 Preview : 

 

 

Image_file

 

Comments

Post a Comment