.Button{

background-color:#0099ff;

color:white;

width:100px;

height:50px;

}

body, html {

height: 1000px;

margin: 0;

width: 1950px;

position: fixed;

}

#canvasDiv{

background-image: url("pic.png");

/* Full height */

height: 100%;

/* Center and scale the image nicely */

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

var buttonClicked = false;

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 draw() {

if(buttonClicked == true) {

ctx.beginPath();

ctx.moveTo(prevX, prevY);

ctx.lineTo(currX, currY);

ctx.strokeStyle = x;

ctx.lineWidth = y;

ctx.stroke();

ctx.closePath();

}

}

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();

}

}

}

function test(){

buttonClicked = true;

}

Copyright ©