I want to do something like this in the canvas with Javascript.
I want to blur a square. I looked for it on the internet but I didn't find anything. If I don't have to use an external JS library, it'll be better.
[EDIT]I'm not refering to the Finder Icon but the square that is behind it.[/EDIT]
Stackoverflow's Ken Fyrstenberg has authored a very nice blur script here:
https://github.com/epistemex/realtime-blur-js
Here's an example using Ken's blur plus a tinted 25% opaque rectangle:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/wingedLion.jpg";
function start(){
var tempcanvas=document.createElement("canvas");
var tctx=tempcanvas.getContext("2d");
cw=canvas.width=tempcanvas.width=img.width;
ch=canvas.height=tempcanvas.height=img.height;
var x=50;
var y=250;
var w=325;
var h=75;
tctx.drawImage(img,0,0);
var rtblur;
rtblur=new RTBlur({source:tempcanvas});
rtblur.blur(0.50,tctx);
ctx.drawImage(img,0,0);
ctx.drawImage(tempcanvas, x,y,w,h, x,y,w,h);
ctx.fillStyle='tan';
ctx.globalAlpha=0.250;
ctx.fillRect(x,y,w,h);
ctx.globalAlpha=1.00;
ctx.strokeStyle='darkgray';
ctx.lineWidth=2;
ctx.strokeRect(x,y,w,h);
ctx.font='18px verdana';
ctx.fillStyle='white';
ctx.fillText('A rect with blurred background',x+20,y+30);
ctx.fillText('and a tan 25% opacity tint',x+20,y+55);
}
body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}
<script src="https://cdn.rawgit.com/epistemex/realtime-blur-js/master/rtblur.js"></script>
<canvas id="canvas" width=300 height=300></canvas>
Related
today i've got a problem regarding JavaScript.
I was given an exercise which consists on create a circle on the screen, using JavaScript, and then make it move to the right.
So the problem comes when i put in the function animate().
The code by itself works, it creates a circle, but when i insert the function animate() , put the code in it, and then try to recall it with requestFrameAnimation(animate), it just doesn't draw on the screen.
Code right down here. I've tried everything i am capable of, but couldn't fix it.
Thanks for the replies.
HTML:
<head>
<style type="text/css">
canvas{
border:1px solid black;
}
body{
margin:0px;
background-color:red;
</style>
</head>
<body>
<canvas></canvas>
<script src="canvas.js"></script>
</script>
</body>
JS:
canvas = document.querySelector('canvas'); //CANVAS SELECTOR
canvas.width = window.innerWidth; //MATCHING THE CANVAS WIDTH WITH THE WINDOW WIDTH
canvas.height = window.innerHeight; //********************HEIGHT***************HEIGHT
context=canvas.getContext("2d");
var x=200;
function animate(){ //Starting the function
context.beginPath(); //Initializing a Path of drawings
context.arc(x,200,100,0,Math.PI*2, true); //drawing the circle
context.fillStyle="rgba(120,10,200,0.5)"; //filling the circle
context.fill();
context.strokeStyle = 'blue'; //giving the circle a strokeline
context.stroke();
x+=1; //increasing the circle x so that it keeps moving towards right
requestAnimationFrame(animate); //calling back to the function so it keeps drawing infinitely.
}
I have canvas area, where i can add some images.
And i want to cut whole canvas to parts and download just one part of image.
If i put divs with color overlay canvas, i can't move my elements inside.
But i want to show users which area has been selected and will be downloaded.
Is it possible to show some divs overlay canvas and also manage with canvas?
If don't how can i listening mouseover event for my div which is invisible, because have lower z-index, than my canvas image ?
Instead of trying to color your divs, you use a second (overlay) canvas on top of your image canvas to tint the desired parts of your image canvas underneath.
Define a javascript object representing each part (rectangle) of your canvas.
Place a second overlay canvas over your image canvas and tell it not emit events using CSS: pointer-events:none.
On mousemove, fill the part of the overlay canvas under the mouse with semi-transparent color.
Here is example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var overlay=document.getElementById("overlay");
var octx=overlay.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
var selectedPart=1;
var parts=[];
var img=new Image();
img.onload=start;
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/sailboatSmall.png';
function start(){
cw=canvas.width=overlay.width=img.width;
ch=canvas.height=overlay.height=img.height;
octx.font='18px verdana';
octx.textAlign='center';
octx.textBaseline='middle';
octx.lineWidth=0.50;
octx.fillStyle='red';
octx.globalAlpha=0.10;
parts.push({x:0,y:0,w:cw/3,h:ch/2});
parts.push({x:cw/3,y:0,w:cw/3,h:ch/2});
parts.push({x:cw*2/3,y:0,w:cw/3,h:ch/2});
parts.push({x:0,y:ch/2,w:cw/2,h:ch/2});
parts.push({x:cw/2,y:ch/2,w:cw/2,h:ch/2});
ctx.drawImage(img,0,0);
$("#canvas").mousemove(function(e){handleMouseMove(e);});
}
function handleMouseMove(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
var x=parseInt(e.clientX-offsetX);
var y=parseInt(e.clientY-offsetY);
for(var i=0;i<parts.length;i++){
var p=parts[i];
if(x>p.x && x<p.x+p.w && y>p.y && y<p.y+p.h){
if(i==selectedPart){return;}
selectedPart=i;
octx.clearRect(0,0,cw,ch);
octx.fillRect(p.x,p.y,p.w,p.h);
}
}
}
body{ background-color:white; }
#container{position:relative;}
#canvas,#overlay{position:absolute;}
#overlay{pointer-events:none;border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move mouse over image parts</h4>
<div id=container>
<canvas id="canvas" width=300 height=300></canvas>
<canvas id="overlay" width=300 height=300></canvas>
</div>
I have an image of 4000px by 3000px. I want to display this image on an html page and allow users to select coordinates over this image.
Actually I have to replicate from this:
https://www.botb.com/CompetitionPlay.aspx?SiteID=1®ion=GB&cid=2ca08b9b-4717-474c-b5ec-1e6a40df6d54&play=1
(Please register and see this element. Its free to sign up)
Actually I want to display this 4000x3000px picture in 700x500px div size but the user should be able to select coordinates in the picture relative to its actual size i.e 4000x3000px.
The problem with simple approach of scaling the pixels is that the user is only able to select coordinates from downscaled pixels. I want the user to able to select a coordinate from 4000*3000 possibilities
How can I fix a large dimensions image into that size and make magnify tool just like the one in the above? Is it possible in using html5 canvas?
If you can share any jquery plugin for this then I will be very grateful.
Image at 25% size:
Image with magnified section (magnified section is 100% size)
Here's code to magnify the image when the user holds the mouse down over their desired magnification point.
The code uses a second overlaying canvas to present a portion of the magnified (full-sized) image.
Example code and a Demo:
This starting example uses a fixed size magnification viewport, but you can adjust to let the user use mousedown+mouseup to define a variable sized viewport.
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
var magifier=document.getElementById("magnifier");
var mctx=magnifier.getContext("2d");
var $magnifier=$('#magnifier');
var mw=100;
var mh=100;
var downscale=0.25;
var upscale=1/downscale;
var iw,ih;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/soccer.jpg";
function start(){
magnify();
iw=img.width;
ih=img.height;
cw=canvas.width=iw*downscale;
ch=canvas.height=ih*downscale;
ctx.drawImage(img,0,0,cw,ch);
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas,#magnifier").mouseup(function(e){handleMouseUp(e);});
}
function magnify(x,y){
if(!x){$magnifier.css({left:-999}); return;};
$magnifier.css({left:x-mw/2,top:y-mh/2});
mctx.clearRect(0,0,mw,mh);
mctx.drawImage(img,-(x)*upscale+mw/2,-(y)*upscale+mh/2);
}
function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
var x=parseInt(e.clientX-offsetX);
var y=parseInt(e.clientY-offsetY);
magnify(x,y);
}
function handleMouseUp(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
magnify();
}
body{ background-color: ivory; }
#container{position:relative;}
#canvas{position:absolute;border:1px solid red;}
#magnifier{position:absolute;border:3px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Hold mouse down for magnified view.</h4>
<div id=container>
<canvas id="canvas" width=300 height=300></canvas>
<canvas id="magnifier" width=100 height=100></canvas>
</div>
maybe something like this, you can use this to calculate the ratio to the original size too, just do the multiplication.
var element = document.getElementById("box");
element.onmousemove = function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
show(x, y);
}
function show(x, y) {
coords.innerHTML = "(" + x + "," + y + ")";
}
#box {
border: 2px solid black;
background: lightblue;
width: 200px;
height: 150px;
cursor: crosshair;
background-image: url('http://lorempixel.com/200/150/');
}
body {
margin: 10px;
}
Coords <span id="coords">(X,Y)</span>
<div id="box"></div>
Hello I have this script that checks for transparent pixels and non transparent pixels. Now i made it so the result is coming from 100px by 100px rectangle on mouse over:
var data = ctx.getImageData(100,100, canvas.width, canvas.height).data;
And right now it shows on mouse of over the result of Opague area and Transparent area.
I would like somehow to visualise this rectangle on load with a grid overlaying the image and the oppaque boxes and transparent one to have different colours like oppaque is green transparent is red. I need probably on load function? But how should it look?
I am stuck here and need someone to direct me in the right position
and here is my current progress:
https://jsfiddle.net/kdichev/Lnp3k5re/
Since you probably want the game console to still show, you can draw your 100x100 boxes with a reduced alpha (globalAlpha).
Here's example code and a Demo:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
var boxWidth=100;
var boxHeight=100;
var boxRows=Math.ceil(865/boxHeight);
var boxCols=Math.ceil(1152/boxWidth);
var boxes=new Array(boxRows*boxCols);
for(var i=0;i<boxes.length;i++){boxes[i]=false;}
var img=new Image();
img.onload=start;
img.crossOrigin='anonymous';
img.src="http://i.imgur.com/RrHayx8.png?1";
function start(){
ctx.drawImage(img,0,0);
var d=ctx.getImageData(0,0,cw,ch).data;
for(var i=0;i<d.length;i+=4){
if(d[i+3]>200){
var px=parseInt(i/4);
var pixelY=parseInt(px/cw);
var pixelX=px-pixelY*cw;
var boxX=parseInt(pixelX/boxWidth);
var boxY=parseInt(pixelY/boxHeight);
boxes[boxY*boxCols+boxX]=true;
}
}
ctx.globalAlpha=0.25;
ctx.fillStyle='red';
for(var i=0;i<boxes.length;i++){
var y=parseInt(i/boxCols);
var x=i-y*boxCols;
if(boxes[i]==true){
ctx.fillRect(x*boxWidth,y*boxHeight,boxWidth,boxHeight);
}
}
ctx.globalAlpha=1.00;
ctx.fillStyle='black';
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<canvas id="canvas" width=1152 height=865></canvas>
I am trying to draw a line on a canvas after a timeout period. One of the "lineTo" parameters is being sent a value from a variable that is being declared in another script and is being passed as a window.var....
I have a console log set up to execute at the same time as the variable is accessed in the canvas script as well.
onLoad, everything executes as it should. After the timeout, the console shows that the variable has a value, but the canvas line is not drawn.
At first I had no timeout inserted and the variable kept coming back as undefined. I opted to go with a timeout, as I don't fully understand callbacks yet.
Any advice would be greatly appreciated!
<script>
window.setTimeout(render,8500);
function render(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var end = window.testVar;
context.beginPath();
context.moveTo(4, 28);
context.lineTo(end, 28);
context.lineWidth = 10;
context.stroke();
console.log(end);
}
</script>
context.lineTo expects a number, so cast your testVar to a number
For example:
var end = parseInt(window.testVar);
Your code above works fine for me...the line draws itself after the specified delay:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
window.testVar=23;
window.setTimeout(render,2000);
function render(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var end = window.testVar;
context.beginPath();
context.moveTo(4, 28);
context.lineTo(end, 28);
context.lineWidth = 10;
context.stroke();
console.log(end);
}
body{ background-color: ivory; }
canvas{border:1px solid red;}
<canvas id="canvas" width=300 height=300></canvas>
User error....
I'm using WYSIWYG Web Builder, and I'm using layers. Some how, the canvas element was marked as "visibility: hidden";
Since the background of the canvas is transparent, I didn't catch it.
To all, thanks for commenting.