Develop Reference

Shows a tiny black square on setting canvas height and width to img.offsetHeight and img.offsetWidth

I am trying to display a canvas with an image drawn in it (especially to prevent downloading the image by chrome mobile users). When i am setting the canvas.style.height to img.offsetHeight and canvas.style.width to img.offsetwidth (here img=document.getElementById("img-element")) its just showing a small black square, as if its height and width are 0.
Here is the code:
window.onload=function(){
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var img=document.getElementById("img");
ctx.drawImage(img, 1, 1);
c.style.height=(img.offsetHeight);
c.style.width=(img.offsetWidth);
}
<img src="Icon.png" id="img" style="display:none">
<canvas id="c" style="border:2px solid #001100" oncontextmenu="return false;">
lol ur potato pc doesn't support canvas!!!
</canvas>
<script src="script.js"></script>
output:

Here is how I would write it. First instead of using style on the canvas width and height just set it as c.width and c.height. I would also set those before drawing the image. Also give the image a width and height and use visibility instead of display. This means you have to set the position to absolute to remove it from the html flow.
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/79/mask-icons-whirl.jpg" id="img">
<canvas id="c" style="border:2px solid #001100" oncontextmenu="return false;">
lol ur potato pc doesn't support canvas!!!
</canvas>
#img {
position: absolute;
width: 200px;
height: 200px;
visibility: hidden;
}
window.onload=function(){
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var img=document.getElementById("img");
c.height = img.getBoundingClientRect().height;
c.width = img.getBoundingClientRect().width;
ctx.drawImage(img, 1, 1);
}

html2canvas border radius not applying to img tag

Need help, when i apply border radius to imgae via css, it is not rendering properly, rendered image should be same preview image. I used html2canvas to convert div to image.
Attached image for reference, first one is normal preview with border-radius and 2nd one without border-radius.
<div id="mydiv">
<img src="1.jpg" />
<p>text!</p>
</div>
<p>Generated image</p>
<div id="image">
<p>Image:</p>
</div>
CSS
<style>
#mydiv {
width: 300px;
height: 200px;
background:#000;
}
#mydiv img {
width: 200px;
height: 200px;
border-radius:100%;
}
</style>
js
html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
//document.getElementById('canvas').appendChild(canvas);
var data = canvas.toDataURL('image/png');
// AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server
var image = new Image();
image.src = data;
document.getElementById('image').appendChild(image);
}
});

This is an unresolved bug (the issue has been reported):
http://github.com/niklasvh/html2canvas/issues/346
You can use the clipping capability of canvas as a workaround.
A Demo: http://jsfiddle.net/m1erickson/8wL2q/
Example code using a clipping area instead of border radius:
// save the context in its unaltered state
ctx.save();
// fill canvas with black
ctx.fillStyle="black";
ctx.fillRect(0,0,canvas.width,canvas.height);
// create clipping region which will display portion of image
// The image will only be visible inside the circular clipping path
ctx.beginPath();
ctx.arc(100,100,100,0,Math.PI*2);
ctx.closePath();
ctx.clip();
// draw the image into the clipping region
ctx.drawImage(img,0,0);
// restore the context to its unaltered state
ctx.restore();

use border: solid windowtext 1.0pt;instead of border:1px solid #fff;in css

Crop image and then stretch to fill available space

I am trying to crop an image from an url and then stretch the cropped image to the available space.
<div style="width:300px; height:400px;">
<img style="width:100%; height:100%;" src="http://www.gravatar.com/avatar/eb95aa803f8c6d536afc87bf8d641ed4?s=128&d=identicon&r=PG" />
</div>
This will stretch the image appropriately, but I do not know how to crop it. I have tried to use clip:rect(0px,60px,200px,0px); but the image will stretch to the available space first and then apply the clip, so it doesn't work for me.
Edit - jsfiddle: http://jsfiddle.net/bjMp6/
For example, I want to try and just crop the head and then stretch the head

Working off of Yoshi's idea without the second div
div
{
width:300px;
height:400px;
border:1px solid #333;
overflow:hidden;
position:relative;
}
img
{
width:300%;
height:300%;
position:absolute;
top:0;
left:-50%;
}
Added the border just to see the containing div. This way you will not need to know the dims of the container but for cropping an image you will have to play with the number with any solution unless all of the images have the same relative composition ie headshots or something similar.
Here's a fiddle for your viewing pleasure.
Also as the container grows/shrinks your image will retain the same crop and position.

I made a fiddle to illustrate the canvas solution :
http://jsfiddle.net/dystroy/mDy24/
Here's the html :
<div id=theimg style="width:300px; height:400px;">
<canvas id=thecanvas style="width:100%;height:100%;">
</div>​
And the js :
var img = new Image();
img.src = "http://www.gravatar.com/avatar/eb95aa803f8c6d536afc87bf8d641ed4?s=128&d=identicon&r=PG";
img.onload = function() {
var can = document.getElementById('thecanvas');
var con = can.getContext("2d");
console.log(con);
con.drawImage(img, 0, 0, 50, 50, 0, 0, can.width, can.height);
}​

canvas context coordinates are inconsitent

I am trying to draw on a html5 canvas and the following code should give me a diagonal line from left top to right bottom. However I do not get the expected result. is there any transformation required to the context ?
HTML
<canvas id="myCanvas" style="margin-left:auto; margin-right:
auto;width:700px;height:100px;border:1px solid grey">
</canvas>
JS
var canvas = $("#myCanvas");
var pen = canvas[0].getContext("2d");
pen.strokeStyle = "#000000"; pen.lineWidth = "2";
pen.beginPath(); pen.moveTo(700, 100); pen.lineTo(0,0);
pen.stroke();
http://jsfiddle.net/neilghosh/DvjAP/2/

jsFiddle demo
Strange but true. The Canvas element W/H have (not only*) to be set inline like:
<canvas id="myCanvas" width="700" height="100"></canvas>
Put the rest in your CSS stylesheet:
#myCanvas{
margin-left:auto;
margin-right: auto;
border:1px solid grey
}
For a better understanding:
Canvas element W/H values are: 300x150 by default, but if you change that values in your stylesheet that will actually stretch your canvas renderings like it would do for any other image.
Another way to change your W/H is with JS like:
canvas[0].width = 700;
canvas[0].height = 100;
Demo

Proportional image scaling

I have a div of known size and a link to some image with random size, which i want to show inside this div. I would like an image to have proportional scaling, to be as big as posible, but no bigger than div (either the image width should equal the div's width or the image height should equal the div's height, but i dont exactly know which case).
How could i do it using only html, css, javascript and jquery?
And it would be great not to read the image size.

You can do this with pure CSS by setting max-width and max-height to 100%. This is a great article to read on the subject: http://unstoppablerobotninja.com/entry/fluid-images. The article also discusses how to deal with older versions of IE.
Here's an example of the CSS in action - http://jsfiddle.net/JamesHill/R7bAA/
HTML
<div id='div1'>
<img class='myImageClass' src='http://www.google.com/intl/en_com/images/srpr/logo3w.png' />
</div>
<br />
<div id='div2'>
<img class='myImageClass' src='http://www.google.com/intl/en_com/images/srpr/logo3w.png' />
</div>
CSS
#div1
{
height:100px;
width:200px;
background-color:Gray;
border: 1px solid Black;
}
#div2
{
height:500px;
width:100px;
background-color:Gray;
border: 1px solid Black;
}
.myImageClass
{
max-height:100%;
max-width:100%;
}

Here's a javascript method that computes the aspect ratio of image and container and sets the corresponding height or width value that will first hit the edge and the image then scales the other dimension proportionally:
// pre-cache image
var img1 = new Image();
img1.src = "http://photos.smugmug.com/photos/344291068_HdnTo-L.jpg";
var img2 = new Image();
img2.src = "http://photos.smugmug.com/photos/344291068_HdnTo-L.jpg";
function placeImage(imgObj, containerID) {
var container = $(containerID);
var imageAspectRatio = imgObj.height / imgObj.width;
var containerAspectRatio = container.height() / container.width();
// figure out which dimension hits first and set that to match
if (imageAspectRatio > containerAspectRatio) {
imgObj.style.height = container.height() + "px";
} else {
imgObj.style.width = container.width() + "px";
}
container.append(imgObj);
}
$("#go").click(function() {
placeImage(img1, "#container1");
placeImage(img2, "#container2");
});
You can see it here in this jsFiddle: http://jsfiddle.net/jfriend00/5K3Zf/