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.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Paint Application</title>
<link rel="icon" href="./img/logo.png" type="image/x-icon" />
<style>
#content{
padding-left: 700px;
}
#myCanvas{
background-color: #d7a9e3ff;
box-shadow: inset 0 0 7px #4b057a;
border-radius: 80px;
border: 12px solid #30034b;
}
#buttonstyle{
background-color: #c5e7f1;
border: 7px solid #42126e;
border-radius: 50px;
color: black;
padding: 20px 40px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#buttonstyle:hover{
background-color:#f1b1fd36;
transition: 0.5s;
}
#bgimg{
background-image:url("./v3.jpg");
}
#shooky{
border: 2px solid #ffffff;
border-radius: 25px;
padding: 25px 25px;
text-align: center;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
#shooky:hover{
opacity: 20%;
transition: 0.21s;
}
</style>
</head>
<body id="bgimg">
<div id="content">
<canvas id="myCanvas" width="600" height="800" onclick="showCoords(event)"></canvas></div>
<center>
<button onclick="shape=1" id="buttonstyle" >Solid Circle</button>
<button onclick="shape=2" id="buttonstyle">circle</button>
<button onclick="shape=3" id="buttonstyle">Solid Square</button>
<button onclick="shape=4" id="buttonstyle">Square</button>
<button onclick="shape=5" id="buttonstyle">Solid Triangle</button>
<button onclick="shape=6" id="buttonstyle">Triangle</button>
<br>
<button onclick="size()" id="buttonstyle" >Change size</button></center>
<center>
<button onclick="change_color(this)" id="shooky" style="background: white;"></button>
<button onclick="change_color(this)" id="shooky" style="background: rgb(255, 72, 72);"></button>
<button onclick="change_color(this)" id="shooky" style="background: rgb(255, 115, 1);"></button>
<button onclick="change_color(this)" id="shooky" style="background: rgb(252, 255, 60);"></button>
<button onclick="change_color(this)" id="shooky" style="background: rgb(94, 255, 45);"></button>
<button onclick="change_color(this)" id="shooky" style="background: rgb(7, 184, 1);"></button>
<button onclick="change_color(this)" id="shooky" style="background: rgb(49, 231, 255);"></button>
<button onclick="change_color(this)" id="shooky" style="background: rgb(46, 112, 255);"></button>
<button onclick="change_color(this)" id="shooky" style="background: rgb(177, 48, 216);"></button>
<button onclick="change_color(this)" id="shooky" style="background: rgb(148, 26, 230);"></button>
<button onclick="change_color(this)" id="shooky" style="background: rgb(54, 0, 124);"></button>
<button onclick="change_color(this)" id="shooky" style="background: rgb(0, 0, 0);"></button>
</center>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
canvas.height = canvas.width;
ctx.transform(1, 0, 0, -1, 0, canvas.height);
let xMax = canvas.height;
let yMax = canvas.width;
let csize= 20;
let sqsize= 50;
let tsize=50;
let tata="black";
function size(){
if (shape==1 ||shape==2){
let c= prompt("Please enter size of circle", "ex:100,50");
csize=c;
}
if (shape==3 ||shape==4){
let s = prompt("Please enter size of square", "ex:100,20");
sqsize=s;
}
if (shape==5 || shape==6){
let t= prompt("Please enter size of triangle","ex:50,84");
tsize=t;
}
}
function change_color(element){
tata=element.style.background;
}
function showCoords(event)
{
var x = event.clientX-545;
var y = yMax-event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
if (shape==1){
ctx.beginPath();
ctx.arc(x, y, csize, 0, 2 * Math.PI);
ctx.fillStyle=tata;
ctx.fill();
}
if (shape==2){
ctx.beginPath();
ctx.arc(x, y, csize, 0, 2 * Math.PI);
ctx.strokeStyle=tata;
ctx.stroke();
}
if (shape==3){
ctx.beginPath();
ctx.rect(x-(sqsize/2),y-(sqsize/2), sqsize,sqsize);
ctx.fillStyle=tata;
ctx.fill();
}
if (shape==4){
ctx.beginPath();
ctx.rect(x-(sqsize/2),y-(sqsize/2), sqsize,sqsize);
ctx.strokeStyle=tata;
ctx.stroke();
}
if (shape==6){
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x-(tsize/2),y-(tsize*0.86602));
ctx.lineTo(x+(tsize/2),y-(tsize*0.86602));
ctx.lineTo(x,y)
ctx.strokeStyle=tata;
ctx.stroke();
}
if (shape==5){
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x-(tsize/2),y-(tsize*0.86602));
ctx.lineTo(x+(tsize/2),y-(tsize*0.86602));
ctx.fillStyle=tata;
ctx.fill();
}
}
</script>
<center><p id="demo" style="color: white;"></p></center>
<p
style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
text-align: center;
color:rgb(250, 0, 0);
font-weight: bold;
font-size: larger;"> Developed by Manoj Choudhary V 😎</p>
</body>
</html>
Thus a website is designed and validated for paint application using HTML5 canvas.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent