html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Paint Web App</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/50b80e1ce7.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</head>
<body>
<canvas id="canvas_or"></canvas>
<canvas id="canvas_ly"></canvas>
<div id="mycont2">
<i class="fas fa-pen tool" style="background-color:red"></i>
<i class="fas fa-paint-brush tool"></i>
<i class="fas fa-eraser tool"></i>
<i class="tool">—</i>
<i class="far fa-square tool"></i>
<i class="far fa-circle tool"></i>
<i class="fas fa-fill-drip tool"></i>
<i class="fas fa-draw-polygon tool"></i>
</div>
<div id="mycont3">
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Chelsea+Market&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');
*{
box-sizing:border-box;
}
body {
margin:0;
padding:0;
}
canvas{
position:fixed;
top:0;
left:0;
background-color:none;
}
#mycont1, #mycont2, #mycont3{
position:fixed;
bottom:10px;
right:10px;
height:40px;
width:40px;
border-radius:5000pc;
transition-duration:0.5s;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.addEventListener("load",function(){
alert(`
𝐖𝐡𝐚𝐭'𝐬 𝐍𝐞𝐰
This App comes with lot of implements. The major implementation is that it now supports the drawing of polygons.
————————————————————————————
𝐀𝐛𝐨𝐮𝐭 𝐭𝐡𝐢𝐬 𝐚𝐩𝐩
This app comes with many features of drowing and making shapes.
• Draw irragular lines.
• Use spray effect.
• Draw various shapes i.e. stright lines, reactangles, circles etc.
• Draw polygons as you wish.
• See the path on which you drawing.
• Erase whenever you want.
• Custmize size of each component i.e. eraser, border.
• Fill colors as per your need.
• Draw lines in three mode (—, - - -, – – –).
• Draw random shapes with filled colors by bucket tool.
————————————————————————————
Give you feedback what you think about this.
Github : https://github.com/ayushkumarsingh2422005
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run