function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '12pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function make_base() {
base_image = new Image();
base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
base_image.onload = function() {
context.drawImage(base_image, 0, 0);
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
make_base();
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(canvas, message);
}, false);
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;">
</canvas>
I can add a image on a canvas and also get coordinates of canvas when mouse hovers on it.
But I when I hover on photo, the image will disappear.
The issue is, you are clearing the entire canvas each time before drawing the text (message), which clears the image as well.
To resolve this, you would need to re-draw the image after clearing the canvas and before drawing the text ...
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(base_image, 0, 0); //<-- draw image
context.font = '12pt Calibri';
context.fillStyle = 'red';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function make_base() {
base_image = new Image();
base_image.src = 'https://www.w3schools.com/css/img_fjords.jpg';
base_image.onload = function() {
context.drawImage(base_image, 0, 0);
}
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
make_base();
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(canvas, message);
}, false);
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
Related
I have html canvas where i dropped image on it i want to apply linear gradient effect on image. My scenario is that user can select some portion of image on canvas by mouse and he can select color from color picker. I want to apply effect on selected portion only.
That sounds like a job for createRadialGradient():
var mouse = {
down: false,
x1: null,
y1: null,
x2: null,
y1: null
};
var grad = 'transparent';
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = init;
img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/D%C3%BClmen%2C_Kirchspiel%2C_B%C3%B6rnste%2C_Feld_--_2017_--_3171.jpg/500px-D%C3%BClmen%2C_Kirchspiel%2C_B%C3%B6rnste%2C_Feld_--_2017_--_3171.jpg";
function updateGrad() {
var cx = mouse.x1;
var cy = mouse.y1;
var dist = Math.hypot(mouse.x1-mouse.x2, mouse.y1-mouse.y2);
grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, dist);
grad.addColorStop(1, 'black');
grad.addColorStop(0, 'transparent');
}
function draw() {
// draw the image
ctx.drawImage(img, 0,0);
// draw the gradient
ctx.fillStyle = grad;
ctx.fillRect(0,0,canvas.width,canvas.height);
// draw the line?
ctx.beginPath();
ctx.rect(mouse.x1 - 4, mouse.y1 - 4, 8, 8);
ctx.moveTo(mouse.x1, mouse.y1);
ctx.lineTo(mouse.x2, mouse.y2);
ctx.rect(mouse.x2 - 4, mouse.y2 - 4, 8, 8);
ctx.stroke();
}
function init() {
canvas.width = this.width;
canvas.height = this.height;
canvas.onmousedown = mousedown;
document.onmousemove = mousemove;
document.onmouseup = mouseup;
ctx.strokeStyle = 'white';
draw();
}
function mousedown(evt) {
var rect = canvas.getBoundingClientRect();
mouse.down = true;
mouse.x1 = evt.clientX - rect.left;
mouse.y1 = evt.clientY - rect.top;
}
function mousemove(evt) {
if(!mouse.down) return;
var rect = canvas.getBoundingClientRect();
mouse.x2 = evt.clientX - rect.left;
mouse.y2 = evt.clientY - rect.top;
updateGrad();
draw();
}
function mouseup(evt) {
mouse.down = false;
}
<canvas id="canvas"></canvas>
I want to get mouse position only when my mouse button is press.
Now it can getting coordinates when I press my mouse, but it can not stop when i unpressed
<!DOCTYPE HTML>
<html>
<head>
<body style="background-color:3F6E6F;">
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="1200" height="1000" onmousedown="mouseDown()" onmouseup="mouseUp()"></canvas>
<script>
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function mouseUp() {
canvas.removeEventListener('mousemove', mouseDown)
// alert('44')
}
function mouseDown() {
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(canvas, message);
}, false);
}
</script>
</body>
</html>
You have to pass same argument function in both addEventListener and removeEventListener to make it work. try this one:
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
//create function here
function move(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(canvas, message);
}
function mouseUp() {
//pass the same arguments
canvas.removeEventListener('mousemove', move, false)
// alert('44')
}
function mouseDown() {
//pass the same arguments
canvas.addEventListener('mousemove', move, false);
}
body {
background-color: 3F6E6F;
margin: 0px;
padding: 0px;
}
canvas {
background-color: green;
}
<canvas id="myCanvas" width="1200" height="1000" onmousedown="mouseDown(event)" onmouseup="mouseUp(event)"></canvas>
You need to remove exactly the same function which is used during addEventListerner Method.Like this way:
var newFunction = function (e){
console.log(e);
}
document.body.addEventListener('mousemove',newFunction,false);
document.body.removeEventListener('mousemove',newFunction,false);
I have a full screen canvas in my page. There are also some dive elements over this canvas. there is an circle element in the canvas that moves with the cursor everywhere in the page. However when the cursor arrives to the div element over the canvas, the circle shape stays in the last place it was on the canvas before arriving to the div.
DEMO: JSFIDDLE
Is ther any way that I can fade-out the circle shape when the cursor is over the div element and fade it in when it backs to the canvas?
Also is there any other effect rather than fading out? like making it small and then fade-out...
Here is the bit of code related to the circle:
function writeMessage(canvas, message, x, y) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
var pattern = context.createPattern(imageResized, 'no-repeat');//Use imageResized, not imageObj.
context.fillStyle = pattern;
context.fill();
context.fillStyle = 'black';
context.beginPath();
context.arc(x, y, 60, 0, 2 * Math.PI);
}
Well, you can always create your own fade function that gets called on mouseout (or mouseleave) event. Here's one I quickly built for you:
function fadeOut(canvas, message, x, y, amount) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
var pattern = context.createPattern(imageResized, 'no-repeat');
context.fillStyle = pattern;
context.fill();
context.font = '28pt Calibri';
context.fillStyle = 'black';
context.beginPath();
context.arc(x, y, amount, 0, 2 * Math.PI);
if (amount > 0) {
setTimeout(function(){
fadeOut(canvas, message, x, y, --amount);
}, 2);
}
else {
context.clearRect(0, 0, canvas.width, canvas.height);
}
}
See it in action here: http://jsfiddle.net/2p9dn8ed/42/
Or in the snippet:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = window.innerWidth;
var height = window.innerHeight;
var imageObj = new Image();
console.log(window.innerWidth + "----" + window.innerHeight);
//Create another canvas to darw a resized image to.
var imageResized = document.createElement('canvas');
imageResized.width = width;
imageResized.height = height;
//Wait for the original image to low to draw the resize.
imageObj.onload = function() {
//Find hoe mauch to scale the image up to cover.
var scaleX = width / imageObj.width;
var scaleY = height / imageObj.height;
var scaleMax = Math.max(scaleX, scaleY);
var ctx = imageResized.getContext('2d');
ctx.scale(scaleMax, scaleMax);
ctx.drawImage(imageObj, 0, 0);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
function writeMessage(canvas, message, x, y) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
var pattern = context.createPattern(imageResized, 'no-repeat');//Use imageResized, not imageObj.
context.fillStyle = pattern;
context.fill();
context.font = '28pt Calibri';
context.fillStyle = 'black';
//context.fillText(message, x, y);
context.beginPath();
context.arc(x, y, 60, 0, 2 * Math.PI);
//context.stroke();
//
}
function fadeOut(canvas, message, x, y, amount) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
var pattern = context.createPattern(imageResized, 'no-repeat');//Use imageResized, not imageObj.
context.fillStyle = pattern;
context.fill();
context.font = '28pt Calibri';
context.fillStyle = 'black';
//context.fillText(message, x, y);
context.beginPath();
context.arc(x, y, amount, 0, 2 * Math.PI);
//context.stroke();
//
if (amount > 0) {
setTimeout(function(){
fadeOut(canvas, message, x, y, --amount);
}, 2);
}
else {
context.clearRect(0, 0, canvas.width, canvas.height);
}
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
canvas.addEventListener('mousemove', function (evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(canvas, message, mousePos.x, mousePos.y);
}, false);
canvas.addEventListener('mouseout', function(evt){
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
console.log(1);
fadeOut(canvas, message, mousePos.x, mousePos.y, 60);
});
// Get the canvas element form the page
var canvas = document.getElementById("myCanvas");
/* Rresize the canvas to occupy the full page,
by getting the widow width and height and setting it to canvas*/
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
anvas, img {
display:block;
margin:1em auto;
border:1px solid black;
}
canvas {
background:url('../img/spiral_galaxy-1920x1080.jpg');
background-size: cover;
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
z-index:-1;
}
div{
width:200px;
height:200px;
background:rgba(0,0,0,0.5);
position: fixed;
top: 20%;
left: 20%;
}
<canvas id="myCanvas" width="578" height="400"></canvas>
<div><h1>TEXT</h1></div>
Im trying to change a mask to an image in a html5 canvas when the mouse enters the canvas.
When the mouse enters the canvas i draw a shape thats gonna act as a mask. It draws as i want but it wont mask the image.
The function that draws the mask is drawLine();
What is wrong here?
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = document.createElement('IMG');
var mY;
var mX;
img.onload = function () {
context.save();
context.beginPath();
context.moveTo(0, 0);
context.lineTo(160, 600);
context.rect(0, 0, 160, 600);
context.closePath();
context.clip();
context.drawImage(img, 0, 0);
context.restore();
};
img.src = "http://placekitten.com/160/600";
canvas.addEventListener('mouseenter', function(evt) {
var mousePos = getMousePos(canvas, evt);
var message = mousePos.y + ', ' + mousePos.x;
mY = mousePos.y;
mX = mousePos.x;
drawLine();
}, false);
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function drawLine() {
if(mX > 80) {
context.restore();
context.fillStyle = "rgb(000,000,000)";
context.beginPath();
context.moveTo(160, mY);
context.lineTo(0,mY+setCutAngle());
context.lineTo(0,600);
context.lineTo(160,600);
context.fill();
context.closePath();
} else {
}
context.stroke();
}
function setCutAngle() {
return Math.floor(Math.random() * 45) + 10;
}
Is this what you are looking for? JSFIDDLE Updated so image loads at the start.
I believe your main problem was caused by not clearing the canvas. Thus your clip would not show
Updated JSFIDDLE to match your code. Remove that logic from your load event. It should only happen on your drawevent. You are also not clearling or clipping your image in the draw event.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = document.createElement('IMG');
var mY;
var mX;
img.onload = function () {
context.drawImage(img, 0, 0);
};
img.src = "http://placekitten.com/160/600";
canvas.addEventListener('mouseenter', function(evt) {
var mousePos = getMousePos(canvas, evt);
var message = mousePos.y + ', ' + mousePos.x;
mY = mousePos.y;
mX = mousePos.x;
drawLine();
}, false);
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
function drawLine() {
context.save();
context.clearRect(0, 0, canvas.width, canvas.height);
if(mX > 80) {
context.restore();
context.fillStyle = "rgb(000,000,000)";
context.beginPath();
context.moveTo(160, mY);
context.lineTo(0,mY+setCutAngle());
context.lineTo(0,600);
context.lineTo(160,600);
context.clip();
context.drawImage(img, 0, 0);
context.closePath();
} else {
}
context.stroke()
}
function setCutAngle() {
return Math.floor(Math.random() * 45) + 10;
}
I tried to provide an eraser as if it was a brush, to erase distinctively. I have a black rect and a picture as canvas background. How can I erase parts of the rect?
"Erasing" in html5 canvas, did not work
my fiddle: http://jsfiddle.net/FgNQk/10/
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
canvas.height = height;
canvas.width = width;
ctx.fillRect(100,100,100,100);
canvas.addEventListener('mousedown', function(e) {
this.down = true;
this.X = e.pageX ;
this.Y = e.pageY ;
this.color = rgb();
}, 0);
canvas.addEventListener('mouseup', function() {
this.down = false;
}, 0);
canvas.addEventListener('mousemove', function(e) {
if(this.down) {
with(ctx) {
beginPath();
moveTo(this.X, this.Y);
lineTo(e.pageX , e.pageY );
strokeStyle = "rgba(255,255,255,0.0)";
ctx.lineWidth=1;
stroke();
}
this.X = e.pageX ;
this.Y = e.pageY ;
}
}, 0);
The solution in the link actually works. Try:
with(ctx) {
beginPath();
moveTo(this.X, this.Y);
lineTo(e.pageX , e.pageY );
globalCompositeOperation = "destination-out";
strokeStyle = "rgba(0,0,0,1)";
ctx.lineWidth=1;
stroke();
}