Scaling a polygon with the screen - javascript

I need to scale polygons with the size of my screen. Originally the polygons are created on a canvas with a size of 640x480. I would like to scale them down or up to a new resolution of whatever I desire and maintain their relative positions and sizes. Here is the code I am currently using:
this.scale = function (x1, y1) {
for (var i = 0; i < this.points.length; i++) {
this.points[i].x *= x1;
this.points[i].y *= y1;
}
}
Where x1 and y1 equal the new size of the screen divided by the original size. The issue I am facing is that the polygons appear to be offset from where they should be relative to an image. I also tried translating the vectors first before scaling and then translating them back to the original centroid using(pseudocode):
centroid = points / number of points
points = points - centroid
points = points * scale
points = points + centroid
This further offsets the polygons from where they should be relative to the image drawn on the canvas. Is there something I am missing here?
Edit: Added an example image of the issue: http://i.stack.imgur.com/EGeSw.jpg
Thanks!

Just multiply all points by the scaling factor of the canvas.
Example Code and a Demo: http://jsfiddle.net/m1erickson/xEqU5/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var scale=1.00;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/scale8.jpg";
function start(){
drawAtScale();
}
function drawAtScale(){
canvas.width=img.width*scale;
canvas.height=img.height*scale;
drawImage();
drawPoly();
}
function drawImage(){
ctx.drawImage(img,0,0,img.width*scale,img.height*scale);
}
function drawPoly(){
ctx.save();
ctx.lineWidth=3;
ctx.beginPath();
ctx.moveTo(185*scale,46*scale);
ctx.lineTo(269*scale,53*scale);
ctx.lineTo(621*scale,170*scale);
ctx.lineTo(630*scale,329*scale);
ctx.lineTo(382*scale,304*scale);
ctx.lineTo(163*scale,234*scale);
ctx.closePath();
ctx.strokeStyle="gold";
ctx.stroke();
ctx.restore();
}
$("#smaller").click(function(){
scale/=1.10;
drawAtScale();
});
$("#larger").click(function(){
scale*=1.10;
drawAtScale();
});
}); // end $(function(){});
</script>
</head>
<body>
<button id="smaller">Scale Canvas Smaller</button>
<button id="larger">Scale Canvas Larger</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

I was able to fix my issue. I was scaling correctly however when the shapes were being created they were being created on a differently sized image which had black boxes at the top causing an offset.
Using a simple translation fixed the issue. The code looked something like this:
//My offset.
this.translate(-10, -50);
this.translate = function (x1, y1) {
for (var i = 0; i < this.points.length; i++) {
this.points[i].x += x1;
this.points[i].y += y1;
}
}

Related

HTML5 Canvas: Replace Cursor with Crossing Lines

I'm trying to replace my cursor within the canvas with two perpendicular lines: one horizontal and one vertical. Example here: http://imgur.com/tUBkQn8
I need to do three things
1) Hide the cursor
2) Draw the crossing lines
3) Erase old lines on mouse move and draw new lines based on new mouse location
The following code is a non-performant way of achieving #2 and #3 (it's incredibly slow re-rendering the entire canvas every time the mouse moves):
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
canvas.addEventListener('mousemove', function(evt) {
// clear the canvas
ctx.clearRect(0, 0, xsize, ysize);
// re-draw the base
drawCanvas();
var mousePos = getMousePos(canvas, evt);
// draw vertical line
ctx.beginPath();
ctx.moveTo(mousePos.x,0);
ctx.lineTo(mousePos.x,ysize);
ctx.stroke();
ctx.closePath();
// draw horizontal line
ctx.beginPath();
ctx.moveTo(0,mousePos.y);
ctx.lineTo(xsize,mousePos.y);
ctx.stroke();
ctx.closePath();
}, false);
So my questions:
1) How do I hide the cursor but still display the lines?
2) Is there a way I can just re-render the crossing lines ONLY, rather than the whole canvas every time the mouse moves? Thanks!
Here's one way to create a custom cursor and maintain performance:
Create a second canvas on top of your main drawing canvas.
Hide the system mouse cursor on both the canvases.
Draw/Move your X-cursor and nothing else on the top canvas
Example code and a Demo: http://jsfiddle.net/m1erickson/abokzhn6/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#wrapper{position:relative;}
#canvas,#cursor{position:absolute; cursor:none;}
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("cursor");
var ctx=canvas.getContext("2d");
var $canvas=$("#cursor");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
$("#cursor").mousemove(function(e){handleMouseMove(e);});
function handleMouseMove(e){
e.preventDefault();
e.stopPropagation();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
ctx.moveTo(mouseX,mouseY-15);
ctx.lineTo(mouseX,mouseY+15);
ctx.moveTo(mouseX-15,mouseY);
ctx.lineTo(mouseX+15,mouseY);
ctx.stroke();
}
}); // end $(function(){});
</script>
</head>
<body>
<div id='wrapper'>
<canvas id="canvas" width=300 height=300></canvas>
<canvas id="cursor" width=300 height=300></canvas>
</div>
</body>
</html>
Ad 1
I didn't test it but I think that you can hide cursor by changing cursor image in CSS to white 1x1 image.
Ad 2
Use http://kineticjs.com/

Find all black rectangles in canvas

Let's say I have an scanned paper with some black filled rectangles and I want to positionate all of them, getting their coordinates (X and Y) and their dimensions (Width and Height).
Is there any accurate algorithm which does what I need? I'm new to pixel processing with Javascript and Canvas and I need some help. Thanks in advance!
Identifying the x,y,width,height of all black rectangles involves these steps:
Use context.getImageData to get an array of all the r,g,b,a pixel information on the canvas.
Scan the pixel colors to find any one black pixel.
Find the bounding box of the black rectangle containing that one black pixel.
That bounding box will give you the x,y,width,height of one black rectangle.
Clear that black rectangle so that it is not found when searching for the next black rectangle.
Repeat step#1 until all the rectangles are identified.
Here's example code and a Demo: http://jsfiddle.net/m1erickson/3m0dL368/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
#clips{border:1px solid blue; padding:5px;}
img{margin:3px;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw,ch;
// background definition
// OPTION: look at the top-left pixel and assume == background
// then set these vars automatically
var isTransparent=false;
var bkColor={r:255,g:255,b:255};
var bkFillColor="rgb("+bkColor.r+","+bkColor.g+","+bkColor.b+")";
cw=canvas.width;
ch=canvas.height;
ctx.fillStyle="white";
ctx.fillRect(0,0,canvas.width,canvas.height);
drawTestRect(30,30,50,50,"1");
drawTestRect(100,30,50,50,"2");
drawTestRect(170,30,50,50,"3");
function drawTestRect(x,y,w,h,label){
ctx.fillStyle="black";
ctx.fillRect(x,y,w,h);
ctx.fillStyle="white";
ctx.font="24px verdana";
ctx.fillText(label,x+10,y+25);
}
function clipBox(data){
var pos=findEdge(data);
if(!pos.valid){return;}
var bb=findBoundary(pos,data);
alert("Found target at "+bb.x+"/"+bb.y+", size: "+bb.width+"/"+bb.height);
clipToImage(bb.x,bb.y,bb.width,bb.height);
if(isTransparent){
// clear the clipped area
// plus a few pixels to clear any anti-aliasing
ctx.clearRect(bb.x-2,bb.y-2,bb.width+4,bb.height+4);
}else{
// fill the clipped area with the bkColor
// plus a few pixels to clear any anti-aliasing
ctx.fillStyle=bkFillColor;
ctx.fillRect(bb.x-2,bb.y-2,bb.width+4,bb.height+4);
}
}
function xyIsInImage(data,x,y){
// find the starting index of the r,g,b,a of pixel x,y
var start=(y*cw+x)*4;
if(isTransparent){
return(data[start+3]>25);
}else{
var r=data[start+0];
var g=data[start+1];
var b=data[start+2];
var a=data[start+3]; // pixel alpha (opacity)
var deltaR=Math.abs(bkColor.r-r);
var deltaG=Math.abs(bkColor.g-g);
var deltaB=Math.abs(bkColor.b-b);
return(!(deltaR<5 && deltaG<5 && deltaB<5 && a>25));
}
}
function findEdge(data){
for(var y=0;y<ch;y++){
for(var x=0;x<cw;x++){
if(xyIsInImage(data,x,y)){
return({x:x,y:y,valid:true});
}
}}
return({x:-100,y:-100,valid:false});
}
function findBoundary(pos,data){
var x0=x1=pos.x;
var y0=y1=pos.y;
while(y1<=ch && xyIsInImage(data,x1,y1)){y1++;}
var x2=x1;
var y2=y1-1;
while(x2<=cw && xyIsInImage(data,x2,y2)){x2++;}
return({x:x0,y:y0,width:x2-x0,height:y2-y0+1});
}
function drawLine(x1,y1,x2,y2){
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.strokeStyle="red";
ctx.lineWidth=0.50;
ctx.stroke();
}
function clipToImage(x,y,w,h){
// don't save anti-alias slivers
if(w<3 || h<3){ return; }
// save clipped area to an img element
var tempCanvas=document.createElement("canvas");
var tempCtx=tempCanvas.getContext("2d");
tempCanvas.width=w;
tempCanvas.height=h;
tempCtx.drawImage(canvas,x,y,w,h,0,0,w,h);
var image=new Image();
image.width=w;
image.height=h;
image.src=tempCanvas.toDataURL();
$("#clips").append(image);
}
$("#unbox").click(function(){
var imgData=ctx.getImageData(0,0,cw,ch);
var data=imgData.data;
clipBox(data);
});
}); // end $(function(){});
</script>
</head>
<body>
<button id="unbox">Clip next sub-image</button><br>
<canvas id="canvas" width=300 height=150></canvas><br>
<h4>Below are images clipped from the canvas above.</h4><br>
<div id="clips"></div>
</body>
</html>

Canvas size in HTML5

I have this code in my project, here is the link: http://jsfiddle.net/89wgk/
This is my code:
<canvas id="myCanvas" width="188" height="200"></canvas>
var rectWidth = 110;
var rectHeight = 110;
var rectX = 10;
var rectY = 25;
When I put the mouse in curved rectangle starts the shadow, but I want that to happen when I put the mouse over the reeds (rectangle) and not within the canvas.
I wonder how do I run the shadow so when I move the mouse over the rectangle?
Here is how I would do it:
create a function that draws the arc shape because it must be redrawn often
listen for mouseMove events on the canvas
test whether the mouse is inside the arc with context.isPointInside(mouseX,mouseY)
redraw the arc with/without the shadow based on if the mouse is inside the arc
Have Fun!
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/64BHx/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var w = 110;
var h = 110;
var x = 10;
var y = 25;
var isShadowed=false;
context.strokeStyle="#FF2A2A";
context.shadowBlur = 20;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.globalAlpha=.250;
context.strokeRect(x,y,w,h);
context.globalAlpha=1.00;
function draw(){
// clear the canvas
context.clearRect(0,0,canvas.width,canvas.height);
// save the context state
context.save();
// set/clear the shadow based on isShadowed
context.shadowColor= isShadowed ? '#7FD4FF' : "#FFFFFF";
// draw the arc shape
context.beginPath();
context.moveTo(x,y);
context.quadraticCurveTo(x+w-2,y+2,x+w,y+h);
context.lineTo(x+w-35,y+h);
context.quadraticCurveTo(x+w-2-35,y+2+35,x,y+35);
context.lineTo(x,y);
context.fillStyle="red";
context.fill();
context.stroke();
// restore the context state
context.restore();
}
// testing: display if mouse is in/out of arc shape
var $status=$("#status");
// listen for mousemove events
$("#canvas").mousemove(function(e){handleMouseMove(e);});
// handle mousemove events
function handleMouseMove(e){
// we alone are using mousemove events
e.preventDefault();
// get current mouse X/Y
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// hit test if mouse is inside the arc shape
var isInside=context.isPointInPath(mouseX,mouseY);
$status.text("Is mouse inside: "+isInside);
// don't redraw unless needed
if(isInside && isShadowed){return;}
if(!isInside && !isShadowed){return;}
// change the shadow and redraw
isShadowed=isInside;
draw();
}
// start by drawing the unshadowed arc
draw();
}); // end $(function(){});
</script>
</head>
<body>
<p id="status">Status</p><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Show converted mouse coordinates of an element with javascript

I'd like to show a mouse tooltip like this:
with a coordinate system relative to its image.
Whenever the mouse is hovered over one of the 75x75 cells, the position is displayed in text. I can only show the mouse's raw coordinates, but can't figure out the math to display it like it is in the picture.
I'm open to HTML5 implementations as well.
Here’s how to convert mouse coordinates to cell coordinates and display a tooltip
This math calculates which 75x75 cell your mouse is inside:
var col=parseInt(mouseX/75);
var row=parseInt(mouseY/75);
And here is the math to calculate a tip rectangle in the upper-right of that cell:
var tipX=tipCol*75+75-tipWidth;
var tipY=tipRow*75;
You can use canvas to draw the tip inside the cell at your calculated coordinates:
function tip(x,y){
var tipX=tipCol*75+75-tipWidth;
var tipY=tipRow*75;
ctx.beginPath();
ctx.rect(tipX,tipY,tipWidth,tipHeight);
ctx.fillStyle="ivory";
ctx.fill();
ctx.fillStyle="blue";
ctx.fillText(tipCol+","+tipRow,tipX+2,tipY+17);
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/9V5QK/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:25px;}
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var startX;
var startY;
var isDown=false;
var tipWidth=35;
var tipHeight=22;
var tipRow;
var tipCol;
ctx.font="14pt verdana";
draw();
function draw(){
// you would just draw your image here
// ctx.drawImage(0,0,image.width,image.height);
// but for illustration, this just recreates your image
ctx.beginPath();
ctx.rect(0,0,375,225);
for(var x=1;x<5;x++){ ctx.moveTo(x*75,0); ctx.lineTo(x*75,canvas.height); }
for(var y=1;y<3;y++){ ctx.moveTo(0,y*75); ctx.lineTo(canvas.width,y*75); }
ctx.fillStyle="black";
ctx.fill();
ctx.strokeStyle="gray";
ctx.lineWidth=2;
ctx.stroke();
}
function tip(x,y){
var tipX=tipCol*75+75-tipWidth;
var tipY=tipRow*75;
ctx.beginPath();
ctx.rect(tipX,tipY,tipWidth,tipHeight);
ctx.fillStyle="ivory";
ctx.fill();
ctx.fillStyle="blue";
ctx.fillText(tipCol+","+tipRow,tipX+2,tipY+17);
}
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
$("#movelog").html("Move: "+ mouseX + " / " + mouseY);
// Put your mousemove stuff here
var col=parseInt(mouseX/75);
var row=parseInt(mouseY/75);
if(!(row==tipRow && col==tipCol)){
tipCol=col;
tipRow=row;
draw();
tip();
}
}
$("#canvas").mousemove(function(e){handleMouseMove(e);});
}); // end $(function(){});
</script>
</head>
<body>
<p>Move mouse over grid to display current cell</p>
<p id="movelog">Move</p>
<canvas id="canvas" width=375 height=225></canvas>
</body>
</html>

rotating 2 images on canvas

I have to draw 3 images on the canvas and need to rotate 2 of the images.
The images are like
1. circular with a vertical straight line
2. just an horizontal line
3. Big circular image
I need to rotate the 1st 2 images in the center of the canvas.
var canvas = document.getElementById('NewImage');
var context = canvas.getContext('2d');
context.canvas.width = window.innerWidth;
context.canvas.height = window.innerHeight*0.7;
var imageObj = new Image();
var imageObj2 = new Image();
var imageObj3 = new Image();
imageObj.onload = function() {
context.save();
context.translate(imageObj.width/2,imageObj.height/2);
context.rotate(-10*Math.PI/180);
//context.translate(-imageObj.width/2,-imageObj.height/2);
context.drawImage(imageObj,-(imageObj.width/2),-(imageObj.height/2),context.canvas.width,context.canvas.height*0.85);
context.restore();
context.save();
context.globalCompositeOperation="source-over";
context.translate(imageObj2.width/2,imageObj2.height/2);
context.rotate(-10*Math.PI/180);
context.translate(-imageObj2.width/2,-imageObj2.height/2);
context.drawImage(imageObj2, x, y,context.canvas.width,6);
context.restore();
//context.rotate(10*Math.PI/180);
context.drawImage(imageObj3, 0, 0,context.canvas.width,context.canvas.height*0.9);
};
imageObj.src = 'canvas/inner_circle_blackline_vertical.png';
imageObj2.src = 'canvas/horizontal.png';
imageObj3.src = 'canvas/outer_circle.png';
When i try to rotate, the images are not rotating in center. when 1st 2 images rotates it has to look like "X" symbol.
How will i rotate in center of the canvas.
Thanks:)
As designed, your imageObj2 and imageObj3 will never load.
Here is a generic image loader that will load all your images and store them in an array called imgs[].
When all your images have fully loaded, the render() function will be called. That’s where you start drawing.
// This is an image loader
// When render() is called, all your images are fully loaded
var imgURLs = [
"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"];
var imgs=[];
var imgCount=0;
pre_load();
function pre_load(){
for(var i=0;i<imgURLs.length;i++){
var img=new Image();
imgs.push(img);
img.onload=function(){
if(++imgCount>=imgs.length){
// images are now fully loaded
render();
}
}
img.src=imgURLs[i];
}
}
In render(), you just draw your images.
Since the same action (rotating an image) is done repeatedly, you can create a helper function to do the rotated drawing. Here the helper function is drawImageAtAngle.
// draw the rotated lines on the canvas
function render(){
var x=canvas.width/2;
var y=canvas.height/2;
drawImageAtAngle(imgs[0],x,y,-45);
drawImageAtAngle(imgs[2],x,y,45);
drawImageAtAngle(imgs[1],x,y,0);
}
Here the helper function that rotates a supplied image to a supplied angle:
function drawImageAtAngle(image,X,Y,degrees){
var radians=degrees*Math.PI/180;
var halfWidth=image.width/2;
var halfHeight=image.height/2;
ctx.beginPath();
ctx.save();
ctx.translate(X,Y);
ctx.rotate(radians);
ctx.drawImage(image,-halfWidth,-halfHeight);
ctx.restore();
}
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/ZShWW/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:10px;}
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// This is an image loader
// When render() is called, all your images are fully loaded
var imgURLs = [
"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png",
"https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png"];
var imgs=[];
var imgCount=0;
pre_load();
function pre_load(){
for(var i=0;i<imgURLs.length;i++){
var img=new Image();
imgs.push(img);
img.onload=function(){
if(++imgCount>=imgs.length){
// images are now fully loaded
render();
}
}
img.src=imgURLs[i];
}
}
// draw the rotated lines on the canvas
function render(){
var x=canvas.width/2;
var y=canvas.height/2;
drawImageAtAngle(imgs[0],x,y,-45);
drawImageAtAngle(imgs[2],x,y,45);
drawImageAtAngle(imgs[1],x,y,0);
}
function drawImageAtAngle(image,X,Y,degrees){
var radians=degrees*Math.PI/180;
var halfWidth=image.width/2;
var halfHeight=image.height/2;
ctx.beginPath();
ctx.save();
ctx.translate(X,Y);
ctx.rotate(radians);
ctx.drawImage(image,-halfWidth,-halfHeight);
ctx.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<p>This is the line image</p>
<img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/line.png">
<p>The line image rotated at center of canvas</p>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
To find the center of the canvas you have to use the dimensions of the canvas. In your code you are using the dimensions of the image. That is, this line:
context.translate(imageObj.width/2,imageObj.height/2);
should probably be:
context.translate(canvas.width/2,canvas.height/2);
That moves you to the center of the canvas. The rotation then occurs around that center. You are then drawing the image centered on the origin. That part looks correct.
You will then reverse the rotation and then the translation.

Categories

Resources