मैं एक माउस का उपयोग करके HTML कैनवस पर आकर्षित करना चाहता हूं (उदा: एक हस्ताक्षर बनाएं, एक नाम खींचें, ...)
कृपया मेरी मदद करें मैं कैसे कर सकता हूं? कृपया कुछ स्रोत कोड दें। धन्यवाद
मैं एक माउस का उपयोग करके HTML कैनवस पर आकर्षित करना चाहता हूं (उदा: एक हस्ताक्षर बनाएं, एक नाम खींचें, ...)
कृपया मेरी मदद करें मैं कैसे कर सकता हूं? कृपया कुछ स्रोत कोड दें। धन्यवाद
जवाबों:
यहाँ एक कार्य नमूना है।
<html>
<script type="text/javascript">
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "black",
y = 2;
function init() {
canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
}
function color(obj) {
switch (obj.id) {
case "green":
x = "green";
break;
case "blue":
x = "blue";
break;
case "red":
x = "red";
break;
case "yellow":
x = "yellow";
break;
case "orange":
x = "orange";
break;
case "black":
x = "black";
break;
case "white":
x = "white";
break;
}
if (x == "white") y = 14;
else y = 2;
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function erase() {
var m = confirm("Want to clear");
if (m) {
ctx.clearRect(0, 0, w, h);
document.getElementById("canvasimg").style.display = "none";
}
}
function save() {
document.getElementById("canvasimg").style.border = "2px solid";
var dataURL = canvas.toDataURL();
document.getElementById("canvasimg").src = dataURL;
document.getElementById("canvasimg").style.display = "inline";
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
</script>
<body onload="init()">
<canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
<div style="position:absolute;top:12%;left:43%;">Choose Color</div>
<div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>
<div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>
<div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>
<div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>
<div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>
<div style="position:absolute;top:20%;left:43%;">Eraser</div>
<div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>
<img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
<input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">
<input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
</body>
</html>
canvas.offsetLeft;
और canvas.offsetTop;
साथ canvas.getBoundingClientRect().left;
और canvas.getBoundingClientRect().top;
क्रमशः स्क्रॉल समस्या को ठीक करने के लिए।
touchmove
, touchstart
, touchend
और फिर clientX
से आता है e.touches["0"].clientX
में findxy()
कोड, हालांकि क्या इस्तेमाल किया जा रहा है, के रूप में आप क्या मैं परीक्षण किया है से एक ही समय में दोनों घटनाओं के लिए बात नहीं कर सकते हैं का पता लगाने के लिए एक आसान तरीका के बारे में सोचा नहीं किया है। मैंने mouseout
जैसा छोड़ा है। यह सही नहीं है, लेकिन यह काम करता है
यहां कैनवास के साथ एक ड्राइंग एप्लिकेशन बनाने का सबसे सरल तरीका है:
mousedown
, mousemove
है, औरmouseup
कैनवास डोम के लिए ईवेंट श्रोताmousedown
, माउस निर्देशांक प्राप्त करें, और moveTo()
अपने ड्राइंग कर्सर और की स्थिति के लिए विधि का उपयोग करेंbeginPath()
एक नया ड्राइंग पथ शुरू ।mousemove
, लगातार साथ पथ के लिए नया बिंदु जोड़ने lineTo()
, और साथ अंतिम खंड रंगstroke()
।mouseup
, ड्राइंग निष्क्रिय करने के लिए एक ध्वज सेट।वहां से, आप सभी प्रकार की अन्य विशेषताओं को जोड़ सकते हैं जैसे उपयोगकर्ता को एक लाइन मोटाई, रंग, ब्रश स्ट्रोक और यहां तक कि परतें चुनने की क्षमता प्रदान करना।
मुझे लगता है, यहां अन्य उदाहरण बहुत जटिल हैं। यह सरल और केवल JS है ...
// create canvas element and append it to document body
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
// some hotfixes... ( ≖_≖)
document.body.style.margin = 0;
canvas.style.position = 'fixed';
// get canvas 2D context and set him correct size
var ctx = canvas.getContext('2d');
resize();
// last known position
var pos = { x: 0, y: 0 };
window.addEventListener('resize', resize);
document.addEventListener('mousemove', draw);
document.addEventListener('mousedown', setPosition);
document.addEventListener('mouseenter', setPosition);
// new position from mouse event
function setPosition(e) {
pos.x = e.clientX;
pos.y = e.clientY;
}
// resize canvas
function resize() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
function draw(e) {
// mouse left button must be pressed
if (e.buttons !== 1) return;
ctx.beginPath(); // begin
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = '#c0392b';
ctx.moveTo(pos.x, pos.y); // from
setPosition(e);
ctx.lineTo(pos.x, pos.y); // to
ctx.stroke(); // draw it!
}
if (e.buttons !== 1) return;
;-)।
resize
कार्य है। मैं खिड़की के आकार के आधार पर कैनवास की चौड़ाई और ऊंचाई निर्धारित कर रहा हूं। आपको इन्हें अपने आधार पर सेट करना चाहिए <div class="container-fluid">
।
offset
में कुछ जोड़ना होगा setPosition
...
इसे गॉगल किया गया ("html5 कैनवास पेंट प्रोग्राम")। लगता है कि आपको क्या चाहिए।
इस http://jsfiddle.net/ArtBIT/kneDX/ की जाँच करें । यह आपको सही दिशा में निर्देशित करना चाहिए
मैं हस्ताक्षर के लिए भी इस पद्धति का उपयोग करना चाह रहा था, मुझे http://codetheory.in/ पर एक नमूना मिला। ।
मैंने नीचे का कोड जोड़ दिया है a jsfiddle
एचटीएमएल:
<div id="sketch">
<canvas id="paint"></canvas>
</div>
जावास्क्रिप्ट:
(function() {
var canvas = document.querySelector('#paint');
var ctx = canvas.getContext('2d');
var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
var mouse = {x: 0, y: 0};
var last_mouse = {x: 0, y: 0};
/* Mouse Capturing Work */
canvas.addEventListener('mousemove', function(e) {
last_mouse.x = mouse.x;
last_mouse.y = mouse.y;
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
/* Drawing on Paint App */
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'blue';
canvas.addEventListener('mousedown', function(e) {
canvas.addEventListener('mousemove', onPaint, false);
}, false);
canvas.addEventListener('mouseup', function() {
canvas.removeEventListener('mousemove', onPaint, false);
}, false);
var onPaint = function() {
ctx.beginPath();
ctx.moveTo(last_mouse.x, last_mouse.y);
ctx.lineTo(mouse.x, mouse.y);
ctx.closePath();
ctx.stroke();
};
}());
यहाँ मेरा बहुत ही सरल वर्किंग कैनवस ड्रॉ और इरेज़ है।
https://jsfiddle.net/richardcwc/d2gxjdva/
//Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;
var tooltype = 'draw';
//Mousedown
$(canvas).on('mousedown', function(e) {
last_mousex = mousex = parseInt(e.clientX-canvasx);
last_mousey = mousey = parseInt(e.clientY-canvasy);
mousedown = true;
});
//Mouseup
$(canvas).on('mouseup', function(e) {
mousedown = false;
});
//Mousemove
$(canvas).on('mousemove', function(e) {
mousex = parseInt(e.clientX-canvasx);
mousey = parseInt(e.clientY-canvasy);
if(mousedown) {
ctx.beginPath();
if(tooltype=='draw') {
ctx.globalCompositeOperation = 'source-over';
ctx.strokeStyle = 'black';
ctx.lineWidth = 3;
} else {
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = 10;
}
ctx.moveTo(last_mousex,last_mousey);
ctx.lineTo(mousex,mousey);
ctx.lineJoin = ctx.lineCap = 'round';
ctx.stroke();
}
last_mousex = mousex;
last_mousey = mousey;
//Output
$('#output').html('current: '+mousex+', '+mousey+'<br/>last: '+last_mousex+', '+last_mousey+'<br/>mousedown: '+mousedown);
});
//Use draw|erase
use_tool = function(tool) {
tooltype = tool; //update
}
canvas {
cursor: crosshair;
border: 1px solid #000000;
}
<canvas id="canvas" width="800" height="500"></canvas>
<input type="button" value="draw" onclick="use_tool('draw');" />
<input type="button" value="erase" onclick="use_tool('erase');" />
<div id="output"></div>
Alco इस एक की जाँच करें:
उदाहरण:
https://github.com/williammalone/Simple-HTML5-Drawing-App
प्रलेखन:
http://www.williammalone.com/articles/create-html5-canvas-javascript-draw-app/
इस दस्तावेज़ में निम्नलिखित कोड शामिल हैं: -
HTML:
<canvas id="canvas" width="490" height="220"></canvas>
जे एस:
context = document.getElementById('canvas').getContext("2d");
$('#canvas').mousedown(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#canvas').mouseup(function(e){
paint = false;
});
$('#canvas').mouseleave(function(e){
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
//Also redraw
function redraw(){
context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++) {
context.beginPath();
if(clickDrag[i] && i){
context.moveTo(clickX[i-1], clickY[i-1]);
}else{
context.moveTo(clickX[i]-1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
और एक और भयानक उदाहरण
http://perfectionkills.com/exploring-canvas-drawing-techniques/
मुझे इस विषय के लिए एक सरल उदाहरण प्रदान करना था इसलिए मैं यहाँ साझा करूँगा:
http://jsfiddle.net/Haelle/v6tfp2e1
class SignTool {
constructor() {
this.initVars()
this.initEvents()
}
initVars() {
this.canvas = $('#canvas')[0]
this.ctx = this.canvas.getContext("2d")
this.isMouseClicked = false
this.isMouseInCanvas = false
this.prevX = 0
this.currX = 0
this.prevY = 0
this.currY = 0
}
initEvents() {
$('#canvas').on("mousemove", (e) => this.onMouseMove(e))
$('#canvas').on("mousedown", (e) => this.onMouseDown(e))
$('#canvas').on("mouseup", () => this.onMouseUp())
$('#canvas').on("mouseout", () => this.onMouseOut())
$('#canvas').on("mouseenter", (e) => this.onMouseEnter(e))
}
onMouseDown(e) {
this.isMouseClicked = true
this.updateCurrentPosition(e)
}
onMouseUp() {
this.isMouseClicked = false
}
onMouseEnter(e) {
this.isMouseInCanvas = true
this.updateCurrentPosition(e)
}
onMouseOut() {
this.isMouseInCanvas = false
}
onMouseMove(e) {
if (this.isMouseClicked && this.isMouseInCanvas) {
this.updateCurrentPosition(e)
this.draw()
}
}
updateCurrentPosition(e) {
this.prevX = this.currX
this.prevY = this.currY
this.currX = e.clientX - this.canvas.offsetLeft
this.currY = e.clientY - this.canvas.offsetTop
}
draw() {
this.ctx.beginPath()
this.ctx.moveTo(this.prevX, this.prevY)
this.ctx.lineTo(this.currX, this.currY)
this.ctx.strokeStyle = "black"
this.ctx.lineWidth = 2
this.ctx.stroke()
this.ctx.closePath()
}
}
var canvas = new SignTool()
canvas {
position: absolute;
border: 2px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="500" height="300"></canvas>
यह सवाल पूछे जाने और जवाब दिए जाने के बाद से वर्षों से है।
जो कोई साधारण ड्राइंग कैनवास की तलाश करता है (उदाहरण के लिए, उपयोगकर्ता / ग्राहक से हस्ताक्षर लेने के लिए), यहाँ मैं वर्तमान में स्वीकृत उत्तर का अधिक सरलीकृत jquery संस्करण पोस्ट कर रहा हूँ।
$(document).ready(function() {
var flag, dot_flag = false,
prevX, prevY, currX, currY = 0,
color = 'black', thickness = 2;
var $canvas = $('#canvas');
var ctx = $canvas[0].getContext('2d');
$canvas.on('mousemove mousedown mouseup mouseout', function(e) {
prevX = currX;
prevY = currY;
currX = e.clientX - $canvas.offset().left;
currY = e.clientY - $canvas.offset().top;
if (e.type == 'mousedown') {
flag = true;
}
if (e.type == 'mouseup' || e.type == 'mouseout') {
flag = false;
}
if (e.type == 'mousemove') {
if (flag) {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = color;
ctx.lineWidth = thickness;
ctx.stroke();
ctx.closePath();
}
}
});
$('.canvas-clear').on('click', function(e) {
c_width = $canvas.width();
c_height = $canvas.height();
ctx.clearRect(0, 0, c_width, c_height);
$('#canvasimg').hide();
});
});
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<body>
<canvas id="canvas" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
<input type="button" value="Clear" class="canvas-clear" />
</body>
</html>
मुझे बताएं कि क्या आपको इसे लागू करने में परेशानी है। यह प्रोसेसिंग.js का उपयोग करता है और इसमें रंग बदलने और ड्रॉ पॉइंट को बड़ा और छोटा बनाने की विशेषताएं हैं।
<html>
<head>
<!--script librarires-->
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
<!--styles -->
<style type="text/css" src="stylesheet.css">
</style>
</head>
<body>
<!--toolbox -->
<div id="draggable toolbox"></div>
<script type="application/processing">
// new script
int prevx, prevy;
int newx, newy;
boolean cliked;
color c1 = #000000;
int largeur=2;
int ps = 20;
int px = 50;
int py = 50;
void setup() {
size(500,500);
frameRate(25);
background(50);
prevx = mouseX;
prevy = mouseY;
cliked = false;
}
void draw() {
//couleur
noStroke(0);
fill(#FFFFFF);//blanc
rect(px, py, ps, ps);
fill(#000000);
rect(px, py+(ps), ps, ps);
fill(#FF0000);
rect(px, py+(ps*2), ps, ps);
fill(#00FF00);
rect(px, py+(ps*3), ps, ps);
fill(#FFFF00);
rect(px, py+(ps*4), ps, ps);
fill(#0000FF);
rect(px, py+(ps*5), ps, ps);
//largeur
fill(#FFFFFF);
rect(px, py+(ps*7), ps, ps);
fill(#FFFFFF);
rect(px, py+(ps*8), ps, ps);
stroke(#000000);
line(px+2, py+(ps*7)+(ps/2), px+(ps-2), py+(ps*7)+(ps/2));
line(px+(ps/2), py+(ps*7)+1, px+(ps/2), py+(ps*8)-1);
line(px+2, py+(ps*8)+(ps/2), px+(ps-2), py+(ps*8)+(ps/2));
if(cliked==false){
prevx = mouseX;
prevy = mouseY;
}
if(mousePressed) {
cliked = true;
newx = mouseX;
newy = mouseY;
strokeWeight(largeur);
stroke(c1);
line(prevx, prevy, newx, newy);
prevx = newx;
prevy = newy;
}else{
cliked= false;
}
}
void mouseClicked() {
if (mouseX>=px && mouseX<=(px+ps)){
//couleur
if (mouseY>=py && mouseY<=py+(ps*6)){
c1 = get(mouseX, mouseY);
}
//largeur
if (mouseY>=py+(ps*7) && mouseY<=py+(ps*8)){
largeur += 2;
}
if (mouseY>=py+(ps*8) && mouseY<=py+(ps*9)){
if (largeur>2){
largeur -= 2;
}
}
}
}
</script><canvas></canvas>
</body>
</html>
init.js
?
एक सुपर लघु संस्करण, यहां , position:absolute
वेनिला जावास्क्रिप्ट में बिना । मुख्य विचार कैनवास के संदर्भ को सही निर्देशांक में स्थानांतरित करना और एक रेखा खींचना है। यह कैसे काम कर रहा है, इसके बारे में महसूस करने के लिए नीचे दिए गए Uncomment click
हैंडलर और टिप्पणी mousedown
और mousemove
हैंडलर।
<!DOCTYPE html>
<html>
<body>
<p style="margin: 50px">Just some padding in y direction</p>
<canvas id="myCanvas" width="300" height="300" style="background: #000; margin-left: 100px;">Your browser does not support the HTML5 canvas tag.</canvas>
<script>
const c = document.getElementById("myCanvas");
// c.addEventListener("click", penTool); // fires after mouse left btn is released
c.addEventListener("mousedown", setLastCoords); // fires before mouse left btn is released
c.addEventListener("mousemove", freeForm);
const ctx = c.getContext("2d");
function setLastCoords(e) {
const {x, y} = c.getBoundingClientRect();
lastX = e.clientX - x;
lastY = e.clientY - y;
}
function freeForm(e) {
if (e.buttons !== 1) return; // left button is not pushed yet
penTool(e);
}
function penTool(e) {
const {x, y} = c.getBoundingClientRect();
const newX = e.clientX - x;
const newY = e.clientY - y;
ctx.beginPath();
ctx.lineWidth = 5;
ctx.moveTo(lastX, lastY);
ctx.lineTo(newX, newY);
ctx.strokeStyle = 'white';
ctx.stroke();
ctx.closePath();
lastX = newX;
lastY = newY;
}
let lastX = 0;
let lastY = 0;
</script>
</body>
</html>
यदि आपके पास अपने कैनवास के लिए पृष्ठभूमि छवि है, तो आपको इसे ठीक से काम करने के लिए कुछ मोड़ बनाने होंगे क्योंकि सफेद मिटाने की चाल पृष्ठभूमि को छिपाएगी।
यहाँ कोड के साथ एक जिस्ट है ।
<html>
<script type="text/javascript">
var canvas, canvasimg, backgroundImage, finalImg;
var mouseClicked = false;
var prevX = 0;
var currX = 0;
var prevY = 0;
var currY = 0;
var fillStyle = "black";
var globalCompositeOperation = "source-over";
var lineWidth = 2;
function init() {
var imageSrc = '/abstract-geometric-pattern_23-2147508597.jpg'
backgroundImage = new Image();
backgroundImage.src = imageSrc;
canvas = document.getElementById('can');
finalImg = document.getElementById('finalImg');
canvasimg = document.getElementById('canvasimg');
canvas.style.backgroundImage = "url('" + imageSrc + "')";
canvas.addEventListener("mousemove", handleMouseEvent);
canvas.addEventListener("mousedown", handleMouseEvent);
canvas.addEventListener("mouseup", handleMouseEvent);
canvas.addEventListener("mouseout", handleMouseEvent);
}
function getColor(btn) {
globalCompositeOperation = 'source-over';
lineWidth = 2;
switch (btn.getAttribute('data-color')) {
case "green":
fillStyle = "green";
break;
case "blue":
fillStyle = "blue";
break;
case "red":
fillStyle = "red";
break;
case "yellow":
fillStyle = "yellow";
break;
case "orange":
fillStyle = "orange";
break;
case "black":
fillStyle = "black";
break;
case "eraser":
globalCompositeOperation = 'destination-out';
fillStyle = "rgba(0,0,0,1)";
lineWidth = 14;
break;
}
}
function draw(dot) {
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.globalCompositeOperation = globalCompositeOperation;
if(dot){
ctx.fillStyle = fillStyle;
ctx.fillRect(currX, currY, 2, 2);
} else {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = fillStyle;
ctx.lineWidth = lineWidth;
ctx.stroke();
}
ctx.closePath();
}
function erase() {
if (confirm("Want to clear")) {
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
document.getElementById("canvasimg").style.display = "none";
}
}
function save() {
canvas.style.border = "2px solid";
canvasimg.width = canvas.width;
canvasimg.height = canvas.height;
var ctx2 = canvasimg.getContext("2d");
// comment next line to save the draw only
ctx2.drawImage(backgroundImage, 0, 0);
ctx2.drawImage(canvas, 0, 0);
finalImg.src = canvasimg.toDataURL();
finalImg.style.display = "inline";
}
function handleMouseEvent(e) {
if (e.type === 'mousedown') {
prevX = currX;
prevY = currY;
currX = e.offsetX;
currY = e.offsetY;
mouseClicked = true;
draw(true);
}
if (e.type === 'mouseup' || e.type === "mouseout") {
mouseClicked = false;
}
if (e.type === 'mousemove') {
if (mouseClicked) {
prevX = currX;
prevY = currY;
currX = e.offsetX;
currY = e.offsetY;
draw();
}
}
}
</script>
<body onload="init()">
<canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;">
</canvas>
<div style="position:absolute;top:12%;left:43%;">Choose Color</div>
<div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" data-color="green" onclick="getColor(this)"></div>
<div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" data-color="blue" onclick="getColor(this)"></div>
<div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" data-color="red" onclick="getColor(this)"></div>
<div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" data-color="yellow" onclick="getColor(this)"></div>
<div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" data-color="orange" onclick="getColor(this)"></div>
<div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" data-color="black" onclick="getColor(this)"></div>
<div style="position:absolute;top:20%;left:43%;">Eraser</div>
<div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" data-color="eraser" onclick="getColor(this)"></div>
<canvas id="canvasimg" style="display:none;" ></canvas>
<img id="finalImg" style="position:absolute;top:10%;left:52%;display:none;" >
<input type="button" value="save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">
<input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
</body>
</html>