To design a static website for Paint Application using HTML5 canvas.
Requirement collection.
Creating the layout using HTML,CSS and canvas.
Write javascript to capture move events.
Perform the drawing operation based on the user input.
Validate the layout in various browsers.
Validate the HTML code.
Publish the website in the given URL.
<title>Canvas Application</title> <style> .maincontainer{ text-align: center; } body{ background-color: palegoldenrod; } canvas{ background-color: white; } </style> <script type="text/javascript"> var shape; var color; function myClickEvent(e){ var ctx = c.getContext("2d"); ctx.beginPath(); if(color==1){ ctx.strokeStyle='red'; }else if(color==2){ ctx.strokeStyle='yellow'; }else if(color==3){ ctx.strokeStyle='blue'; } if(shape == 0){ ctx.arc(e.offsetX,e.offsetY, 45, 0, 2 * Math.PI); ctx.stroke(); }else if(shape == 1){ ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.closePath(); ctx.stroke(); }else if(shape==2){ ctx.rect(e.offsetX,e.offsetY, 150, 100); ctx.stroke(); }else if(shape==3){ ctx.rect(e.offsetX, e.offsetY, 50, 50); ctx.stroke(); } } function circleClicked(){ shape=0; } function triangleClicked(){ shape=1; } function rectangleClicked(){ shape=2; } function squareClicked(){ shape=3; } function redClicked(){ color=1; } function blueClicked(){ color=3; } function yellowClicked(){ color=2; } </script></div>
<div>
<input type="button" id="red" value="Red">
<input type="button" id="blue" value="Blue">
<input type="button" id="yellow" value="Yellow">
</div>
<script type ="text/javascript">
var c = document.getElementById("myCanvas");
c.addEventListener("click", myClickEvent);
document.getElementById("circle").addEventListener("click", circleClicked);
document.getElementById("line").addEventListener("click", triangleClicked);
document.getElementById("rectangle").addEventListener("click",rectangleClicked);
document.getElementById("square").addEventListener("click",squareClicked);
document.getElementById("red").addEventListener("click",redClicked);
document.getElementById("blue").addEventListener("click",blueClicked);
document.getElementById("yellow").addEventListener("click",yellowClicked);
</script>
<div class="footer">
Developed by Deepika Ravikumar.
</div>
Thus a website is designed and validated for paint application using HTML5 canvas.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent