-
Notifications
You must be signed in to change notification settings - Fork 1
/
canvas.html
127 lines (122 loc) · 4.28 KB
/
canvas.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
div.container {
padding: 5px;
}
span.spacer {
padding: 25px;
position: relative;
}
</style>
</head>
<body onload="initCanv();">
<script type="text/javascript">
var mousePressed = false;
var lastX, lastY;
var ctx;
function initCanv() {
ctx = document.getElementById('canv').getContext("2d");
$('#canv').mousedown(function (e) {
mousePressed = true;
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
});
$('#canv').mousemove(function (e) {
if (mousePressed) {
Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
}
});
$('#canv').mouseup(function (e) {
mousePressed = false;
});
$('#canv').mouseleave(function (e) {
mousePressed = false;
});
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = $('#selColor').val();
ctx.lineWidth = $('#selWidth').val();
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
function clearArea() {
document.getElementById("saveBtn").style.display = "inline-block";
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
document.getElementById("canvasimg").style.display = "none";
document.getElementById("success_msg").innerHTML = "";
}
function changeDPI() {
currentDPI = $('#selDPI').val();
if (currentDPI == '300') {
$('#canv').attr('width', '3508');
$('#canv').attr('height', '2480');
} else if (currentDPI == '150') {
$('#canv').attr('width', '1754');
$('#canv').attr('height', '1240');
} else {
$('#canv').attr('width', '842');
$('#canv').attr('height', '595');
}
}
function save() {
document.getElementById("saveBtn").style.display = "none";
document.getElementById("canvasimg").style.border = "2px solid";
var dataURL = ctx.canvas.toDataURL();
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
document.getElementById("success_msg").innerHTML = "Image generated succesfully.</br>To Save the image:</br>1) Right click inside the canvas</br>2) Click \"Save image as...\"";
}
</script>
<div align="center">
<div class="container">
Drawing DPI :
<select id="selDPI" onchange="changeDPI()">
<option value="72" selected="selected">75dpi</option>
<option value="150">150dpi</option>
<option value="300">300dpi</option>
</select>
<span class="spacer"></span>
Drawing Width :
<select id="selWidth">
<option value="1">1</option>
<option value="3">3</option>
<option value="5" selected="selected">5</option>
<option value="7">7</option>
<option value="9">9</option>
<option value="11">11</option>
</select>
<span class="spacer"></span>
Drawing Color :
<select id="selColor">
<option value="black">black</option>
<option value="blue" selected="selected">blue</option>
<option value="red">red</option>
<option value="green">green</option>
<option value="yellow">yellow</option>
<option value="gray">gray</option>
</select>
<p style="margin: 10px 0px 0px;">Remember to adjust the zoom on your browser to see the whole canvas when you increase the DPI.</p>
</div>
<div class="container">
<canvas id="canv" width="842" height="595" style="border:2px solid black"></canvas>
<img id="canvasimg" style="position:absolute;transform:translateX(-50%);left:50%;" style="display:none;">
<div class="container">
<div id="success_msg"></div>
</div>
</div>
<div class="container">
<button id="saveBtn" onclick="javascript:save();return false;">Save Image</button>
<button id="clearBtn" onclick="javascript:clearArea();return false;">Clear Canvas</button>
</div>
</div>
</body>
</html>