আমি একটি মাউস ব্যবহার করে এইচটিএমএল ক্যানভাসে আঁকতে চাই (উদা: একটি স্বাক্ষর আঁকুন, একটি নাম আঁকুন, ...)
দয়া করে আমাকে সাহায্য করুন আমি কীভাবে পারি? দয়া করে কিছু উত্স কোড দিন। ধন্যবাদ
আমি একটি মাউস ব্যবহার করে এইচটিএমএল ক্যানভাসে আঁকতে চাই (উদা: একটি স্বাক্ষর আঁকুন, একটি নাম আঁকুন, ...)
দয়া করে আমাকে সাহায্য করুন আমি কীভাবে পারি? দয়া করে কিছু উত্স কোড দিন। ধন্যবাদ
উত্তর:
এখানে একটি কাজের নমুনা।
<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
, অঙ্কন অক্ষম করতে একটি পতাকা সেট করুন ।সেখান থেকে, আপনি অন্যান্য ধরণের অন্যান্য বৈশিষ্ট্য যুক্ত করতে পারেন যেমন ব্যবহারকারীকে একটি লাইন বেধ, রঙ, ব্রাশ স্ট্রোক এবং এমনকি স্তরগুলি চয়ন করার ক্ষমতা প্রদান করে।
আমি মনে করি, এখানে অন্যান্য উদাহরণগুলি খুব জটিল। এটি সাধারণ এবং কেবল জেএস ...
// 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
ফাংশন ...
এটি গুগলড ("এইচটিএমএল 5 ক্যানভাস পেইন্ট প্রোগ্রাম")। আপনার যা দরকার তা মনে হচ্ছে।
এটি http://jsfiddle.net/ArtBIT/kneDX/ দেখুন । এটি আপনাকে সঠিক দিকে পরিচালিত করবে
আমি স্বাক্ষরগুলির জন্যও এই পদ্ধতিটি ব্যবহার করতে চাইছিলাম, আমি http://codetheory.in/ এ একটি নমুনা পেয়েছি ।
আমি নীচের কোডটি একটি জিসফিডেলে যুক্ত করেছি
এইচটিএমএল:
<div id="sketch">
<canvas id="paint"></canvas>
</div>
javascript:
(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>
অ্যালকো এটি পরীক্ষা করে দেখুন:
উদাহরণ: https://github.com/williammalone/Simple-HTML5- ড্রয়িং- অ্যাপ
ডকুমেন্টেশন: http://www.williammalone.com/articles/create-html5- ক্যানভাস- জাভাস্ক্রিপ্ট- ড্রাইং- অ্যাপ
/
এই নথিতে নিম্নলিখিত কোডগুলি অন্তর্ভুক্ত রয়েছে: -
এইচটিএমএল:
<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>
আপনার যদি এটি প্রয়োগ করতে সমস্যা হয় তবে আমাকে জানান। এটি প্রসেসিং.জেএস ব্যবহার করে এবং রঙ পরিবর্তন করার জন্য এবং ড্র পয়েন্টটি আরও বৃহত্তর ও ছোট করার বৈশিষ্ট্যযুক্ত।
<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
। মূল ধারণাটি হ'ল ক্যানভাসের প্রসঙ্গটি ডান স্থানাঙ্কে নিয়ে যাওয়া এবং একটি লাইন আঁকুন draw এটি কীভাবে কাজ করছে তার অনুভূতি পেতে নীচে আনকমেন্ট 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>