i wanted to add a image on my canvas .the width and height of the canvas is 400X400.and size of the image is 298x300.i want it to have the size of 30x30 when it will be drawn on the canvas.so i gave it width and height inside script tag.but it is not affecting the original size of the image .it covers up the whole canvas(even only half of it is shown).how can i fix this?
![<html>
<head>
<style>
#mycanvas{
width:400;
height:400;
border:1px solid black;
}
</style>
</head>
<body>
<script>
function draw(){
var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext('2d');
var img=new Image();
img.src="lol1.jpg";
img.style.width="30px";
img.style.height="30px";
ctx.drawImage(img,0,0);
}
window.onload=draw;
</script>
<canvas id="mycanvas"></canvas>
</body>
</html>]
Just use:
ctx.drawImage(img,0,0,30,30);
4th parameter is width, 5th is height.
Related
So I thought that the code
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Log Canvas Width</title>
<style>
#canvas {
background: #888888;
width: 600px;
height: 600px;
}
</style>
<script>
function draw() {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
document.write(canvas.width);
}
</script>
</head>
<body onload="draw();">
<canvas id='canvas'>
Canvas not supported
</canvas>
</body>
</html>
prints 300 rather than 600 because <body onload="draw();"> makes the script run at page loading, and at that time the canvas has not yet caught the revised value (600).
But then I modify the code to:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Log Canvas Width</title>
<style>
#canvas {
background: #888888;
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<canvas id='canvas'>
Canvas not supported
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
document.write(canvas.width);
</script>
</body>
</html>
Now I'm imagining that the script runs after the canvas has taken the attribute from the embedded style and that I will see 600. Not true. I still get 300, even though the canvas duly has width = 600. What is happening?
Default width of canvas is 300 x 150 [Ref]. Canvas does not consider css defined with. Either you defined width/heigh attributes or assign those values as properties of canvas element.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
alert(canvas.width);
<canvas id='canvas' width='600'>
Canvas not supported
</canvas>
OR
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = 600;
alert(canvas.width);
<canvas id='canvas'>
Canvas not supported
</canvas>
canvas.width and canvas.style.width are two different things. In most of the cases, they should be equal, but they can also be different for achieving various effects. 300 you're getting is the canvas default width.
canvas.width is the actual number of pixels that are available inside the canvas, while canvas.style.width is the width of the HTML element, thus you can see stretching, pixelation, etc, if the two numbers are different.
Here are a couple of answers that describe the issue in more detail:
https://stackoverflow.com/a/28142612/965907
https://stackoverflow.com/a/34539170/965907
https://stackoverflow.com/a/28879318/965907
I found that setting the canvas width and height equal to the style width and height helped me with the calculations later.
Like:
canvas.width = canvas.getBoundingClientRect().width;
canvas.height = canvas.getBoundingClientRect().height;
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="800" height="450" style="border:1px solid #d3d3d3; background-color:#999999;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
<!--normal canvas code-->
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
<!--code for the text line-->
ctx.font = "42px Arial";
<!--place the words in mid x position and in upper 1/6 of y position-->
var canvasxposition = (c.width/2)-(ctx.fillText.x/2)
var canvasyposition = c.height/6
ctx.fillText("Hello World",canvasxposition,canvasyposition);
</script>
</body>
</html>
I am using a canvas and it will be later used for an image.
I need to align the text in the middle of x position and in top y position (1/6 of total height should be the y position)
I used the above code and found out that the following line has a problem.
I need to know what is wrong with it. I want to see the middle(y axis) of the text, in the middle (y axis) of the canvas.
var canvasxposition = (c.width/2)-(ctx.fillText.x/2)
You can align text from its own horizontal centerpoint using context.textAlign
You can align text from its own vertical centerpoint using context.textBaseline:
// align text from horizontal and vertical centerpoint of text
ctx.textAlign="center";
ctx.textBaseline="middle";
Example code and a Demo: http://jsfiddle.net/m1erickson/nT37D/
<!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(){
// get references to canvas and context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// crosshairs
ctx.beginPath();
ctx.moveTo(0,canvas.height/6);
ctx.lineTo(canvas.width,canvas.height/6);
ctx.moveTo(canvas.width/2,0);
ctx.lineTo(canvas.width/2,canvas.height);
ctx.stroke();
// align text from horizontal and vertical centerpoint of text
ctx.textAlign="center";
ctx.textBaseline="middle";
// sample text
ctx.font="18px arial";
ctx.fillText("Hello World",canvas.width/2,canvas.height/6);
}); // end $(function(){});
</script>
</head>
<body>
<h4>Align text from horizontal and vertical centerpoint of text</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
image coordinates always confuses me.so to test this i did a little example.i have an image which is 500x500.i have two canvas and i want to draw the image on the first canvas .the size of the canvas is 500x500.the canvas is 50 px from the top and 250 px from the left.the image is not drawn on the canvas.how i can i solve this & please correct me if i am doing any wrong here
there are eight co-ordinates in draw image function (which confuses me most)
1st=0,start_X of source image;
2nd=0,start_Y of source image;
3rd=500,destination_x of source image;
4th=500,destination_Y of source image;
5th=0,canvas_start_X ;
6th=0,canvas_start_Y;
7th=500,canvas_finish_X;
8th=500,canvas_finish_Y;
jsfiddle
code:
<html>
<head>
<style>
*{margin:0px;padding:0px;}
#mydiv{
width:100%;
height:100%;
background-color:black;
}
#mycanvas1{
width:500px;
height:500px;
background-color:white;
border:1px solid white;
margin-top:50px;
margin-left:250px;
}
</style>
</head>
<body>
<div id="mydiv">
<canvas id="mycanvas1"></canvas>
<canvas id="mycanvas2"></canvas>
</div>
<script >
function makeit(){
var canvas1=document.getElementById("mycanvas1");
var ctxbg=canvas1.getContext('2d');
var bgImage=new Image();
bgImage.src="bg.jpg";
alert(bgImage.width+" " +bgImage.height);
bgImage.addEventListener('load',drawBg,false);
function drawBg(){
ctxbg.drawImage(bgImage,0,0,500,0,0,,500,500);
}
}
window.onload=makeit;
</script>
</body>
If the most confusing way of drawing images to the canvas (in the 2d context) confuses you most why don't you try one of the less confusing ways?
ctx.drawImage(img,x,y);
or
ctx.drawImage(img,x,y,width,height);
You should also set your canvas width / height properties on the canvas element, not in the css. The css does not change the actual size of the canvas, the amount of pixels used, just the way it "looks", aka is rendered in the browser. You could display a 1x1 pixels sized canvas in 800x600 and it would still be 1 pixel in size.
What happened in your case is that without width / height properties specified it defaulted to 300x150 in size, so only rendering the top left corner of your image scaled up to 500x500 pixels via css.
That's how you want to set the dimensions.
<canvas id="mycanvas1" width="500" height="500"></canvas>
The 3rd & 4th numeric arguments specify the width and height of the area that is to be clipped from the original image. The 3rd and 4th arguments are used for clipping a subsection from the original image.
The 7th & 8th numeric arguments specify the width and height of the image to be drawn on the canvas. The 7th and 8th arguments are used for scaling the original image as it is drawn on the canvas.
Think of the extended drawImage like this:
drawImage(
sourceImage,
// clip a subsection of the original image
// starting at clipX,clipY
// with the clipped subsection being clipWidth and clipHeight in size
clipX,clipY,clipWidth,clipHeight,
// draw that clipped subsection on the canvas at canvasX,canvasY
// with optional scaling to scaledWidth,scaledHeight
// (no scaling if clipWidth==scaledWidth && clipHeight==scaledHeight)
canvasX,canvasY,scaledWidth,scaledHeight
);
So you can load and draw your image like this:
var bgImage=new Image();
bgImage.onload=function(){
ctxbg.drawImage(bgImage,0,0)
}
bgImage.src="bg.jpg";
Since your not clipping or scaling the original image as you draw it to canvas, there's no reason to use the extended version of drawImage. But the extended version of drawImage would still work if you specify no clipping and no scaling.
This code will draw the entire bgImage on the canvas (assuming the canvas is large enough to hold the full bgImage):
var bgImage=new Image();
bgImage.onload=function(){
ctxbg.drawImage(bgImage,0,0,bgImage.width,bgImage.height,0,0,bgImage.width,bgImage.height)
}
bgImage.src="bg.jpg";
Example code:
<!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>
#mydiv{
width:1000px;
height:1000px;
background-color:black;
}
#mycanvas1{
width:500px;
height:500px;
background-color:white;
border:1px solid white;
margin-top:50px;
margin-left:250px;
}
</style>
<script>
window.onload=function(){
var canvas1=document.getElementById("mycanvas1");
var ctx=canvas1.getContext("2d");
var ctxbg=canvas1.getContext('2d');
var bgImage=new Image();
bgImage.onload=function(){
var w=bgImage.width;
var h=bgImage.height;
ctxbg.drawImage(bgImage,0,0,w,h,0,0,w,h);
}
bgImage.src="https://dl.dropboxusercontent.com/u/139992952/multple/bgImage1.jpg";
};
</script>
</head>
<body>
<div id="mydiv">
<canvas id="mycanvas1" width=300 height=300></canvas>
</div>
</body>
</html>
I am trying to alter an image by highlighting an area defined by coordinates.
I've been using two canvases, on top of each other. Now I don't know if this is the best way to do it in the first place. http://jsfiddle.net/9wJu8/
<canvas id='canvas'>Your browser does not support HTML5 canvas</canvas>
<canvas id='canvas2'>Your browser does not support HTML5 canvas</canvas>
Currently, I am using two images, but I wonder if there is any way to use masks on canvas.
Second of all, I'd like to save the output of the stacked canvases.
What #Ken said but I think some of his code example was accidentally omitted:
A Demo: http://jsfiddle.net/m1erickson/Spkhz/
<!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 cw=700;
var ch=438;
var img=new Image();
img.onload=start;
img.src="cat.jpg";
function start(){
canvas.width=cw;
canvas.height=ch;
// draw the image on the canvas
ctx.drawImage(img,0,0,cw,ch);
// darken the image with a 50% black fill
ctx.save();
ctx.globalAlpha=.50;
ctx.fillStyle="black";
ctx.fillRect(0,0,cw,ch);
ctx.restore();
// ctx.clip() the area to highlight
// and redraw the whole image
// (the image will draw only in the clipping region)
ctx.save();
ctx.beginPath();
ctx.clearRect(300,100,200,100);
ctx.rect(300,100,200,100);
ctx.clip();
ctx.drawImage(img,0,0,cw,ch);
ctx.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
You can use a single canvas for this:
➔ Draw complete image
➔ Draw a transparent black rectangle on top
➔ Use drawImage() with clipping settings
For example:
// draw full image
ctx.drawImage(img, 0, 0);
// cover with a darkened overlay
ctx.fillStyle = 'rgba(0,0,0, 0.5);
ctx.fillRect(0, 0, canvas.width, canvas.height);
// draw region of image
ctx.drawImage(img, x, y, w, h, x, y, w, h);
where x, y, w and h is the region you want to highlight.
To save out as an image just use toDataURL() on the canvas element.
How can I display whole image in circulr shape using Javascript or HTML5. I tried the code below but with this code only part of the image will be converted into circular shape. How can I make the whole display in circular shape?
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
border: 1px solid #9C9898;
}
</style>
<script type="text/javascript" >
</script>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<div id="myCanvas"></div>
<script>
var ctx = document.getElementById('myCanvas').getContext("2d");
ctx.arc(100,100, 50, 0, Math.PI*2,true); // you can use any shape
ctx.clip();
var img = new Image();
img.addEventListener('load', function(e) {
ctx.drawImage(this, 0, 0, 200, 300);
}, true);
img.src="images/hospital_review_profile_placeholder.png";
</script>
</body>
</html>
Instead of using ctx.clip(), you would resize and reposition your image to fit in your circle.
Here is code that will resize your image to its largest size that will fit in the circle.
Then the code positions the resized image properly in the circle.
Here is a Fiddle --- http://jsfiddle.net/m1erickson/s6MzZ/
<!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 radius=50; // circle radius
var fullWidth=200; // actual width of image in pixels
var fullHeight=300; // actual height of image in pixels
var centerX=100; // center X coordinate of the circle
var centerY=100; // center Y coordinate of the Circle
// the image must be resized to fit into the circle
// Call CalcResizedImageDimensions() to get the resized width/height
var size=CalcResizedImageDimensions(radius,fullWidth,fullHeight);
var rectX=centerX-size.width/2; // the X coordinate of the resized rectangle
var rectY=centerY-size.height/2 // the Y coordinate of the resized rectangle
ctx.beginPath();
ctx.arc(centerX,centerY,radius,0,Math.PI*2,true);
// I illustrate with just a rectangle
// you would drawImage() instead
ctx.rect(rectX,rectY,size.width,size.height);
ctx.stroke();
function CalcResizedImageDimensions(r,w,h){
var d=2*r;
var newH=(d*h)/Math.sqrt(w*w+h*h);
var newW=w/h*newH;
return({width:newW,height:newH});
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=200 height=200></canvas>
</body>
</html>