We Keep Coding

phantomjs screen capture for pdf - canvas scaling

i use phantomjs to make a pdf out of the content on my site. And it looks great with canvas as the exception.
in my print.css / media css i have the canvas to 100%
canvas {
height : 100%!important;
width : 100%!important;
}
the canvas / content of canvas (which is a chart generated by chart.js) looks stretched / out of focus.
From reading various post i noticed that setting sizing through css is a no go, and i instead have to have it in-tag or set it through javascript directly on the canvas element.
however, thats not really an option since its already scaled/sized perfectly on the site. If i dont have the 100% height width, the canvas dont get jagged, but its WAY too big for my pdf format.
Whats the right way to go about fixing this, getting a crisp canvas for my screen capture which is sized for A4 / Standard pdf format?
Thanks in advance.

When dealing with a canvas the css 'height' and 'width' element determine the size of the literal DOM element <canvas> NOT the size of the display within. In order to set this try something like this:
// grab canvas attribute
var canvas = document.getElementById('canvas');
// size the display appropriately
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// don't forget to account for the window size changing later on
window.addEventListener('resize', function(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}, false);

HTML5 setDragImage(): dragIcon.width does absolutely nothing

When using the HTML5 drag and drop API, it would appears though the .width property on has no impact on the width of an image being used as an icon for dragging. Take this fiddle for example: http://jsfiddle.net/cnAHv/7/. You can set dragIcon.width to anything you want, and it will not change the actual width of the icon.
Most of the resources on the web seem to arbitrarily set dragIcon.width to 100. Is this just a matter of people copying eachother's code without checking functionality?
So...
Is the width property on an image variable actually something that setDragImage() will accept?
If not, how would you set the width of the icon without manually changing sizing the image in a program like photoshop?

When you use an <img> in setDragImage Javascript will just use the actual image bitmap data, ignoring other attributes like width. Check the specs.
However if you do something like this:
function handleDragStart(e) {
var dragIcon = document.createElement('img');
dragIcon.src = 'http://jsfiddle.net/favicon.png';
dragIcon.width = '100';
var div = document.createElement('div');
div.appendChild(dragIcon);
document.querySelector('body').appendChild(div);
e.dataTransfer.setDragImage(div, -10, -10);
}
http://jsfiddle.net/cnAHv/9/
You will see the drag shadow now contains the bigger image. It occurs because when we use other visible HTML elements (that's why I appended the DIV to the body), the browser will use its rendered view as a drag image.

This answer might be a bit late but you can also use a canvas to scale your original image.
function handleDragStart(e) {
var dragIcon = document.createElement('img');
dragIcon.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC';
var width = 100;
var height = width * (3/4); // The height must be set explicitly. I'm assuming the image is 4:3 for this example
var c = document.createElement("canvas");
c.width = width;
c.height = height;
var ctx = c.getContext('2d');
ctx.drawImage(dragIcon,0,0,width,height);
dragIcon.src = c.toDataURL();
e.dataTransfer.setDragImage(dragIcon, -10, -10);
}
http://jsfiddle.net/cnAHv/138/
The only downside to this is that the canvas may be tainted if the image doesn't come from the same origin. More on tainted canvases here

Create image, size relative to window width. Image not drawn when inserted in DOM

I'm building a phonegap app (with jquery mobile) and trying to insert an image in my DOM with width relative to the window.outerWidth and height auto.
I've already tried placing the image in a div with relative width like so:
<div style="width:myRelativeWidth">
<img style"width:100%; height:100%" src="somePath>
</div>
This works great, except on the iPhone where it sets the height of the image (auto) too late. It will be the correct width, but it is stretched heightwise to its original size before it is sized to the correct aspect ratio.
To counteract this, I've tried to scale it in relation to the size of the original image. The only way I know to get this is by preloading the image and setting the size before it is inserted in the DOM by the following function
imageElement = new Image();
imageElement.src = path;
setImageSize(widthPercentage);
function setImageSize(widthPercentage) {
var pageWidth = window.outerWidth;
var pageHeight = window.outerHeight;
var imageWidth = imageElement.width;
var imageHeight = imageElement.height;
var calculatedImageWidth;
var calculatedImageHeight;
var scaleFactor;
if(widthPercentage) {
calculatedImageWidth = pageWidth * (widthPercentage / 100);
scaleFactor = calculatedImageWidth / imageWidth;
calculatedImageHeight = imageHeight * scaleFactor;
imageElement.width = calculatedImageWidth;
imageElement.height = calculatedImageHeight;
}
}
document.body.appendChild(imageElement);
But testing in the browser i don't get the image when loading the page, but i get it when refreshing it.
Some googling told me that I have a problem with the image being loaded in the cache, but not drawn.
How can i force the image to be drawn?

Found my answer!
Assign the onload method to setImageSize as mentioned by #CBroe, and place it before imageElement.src=.

How to make a background of unknown size to an HTML5 canvas?

I want users to upload an image or specify a URL of an image and then be able to look like they're drawing on top of the image. So I can make a <canvas> element with a background image. But I don't know beforehand how big that image is (well I can figure it out if they uploaded an image). How can I deal with this using jQuery?
I know I can call $('img#id_name').width and create a canvas based on that width (and get the height the same way). But I want that to be the background image.

You can get image's original width/height values after loading and than use css() method for defining values.
var img = $('img#id_name')[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
iWidth = this.width; // Note: $(this).width() will not
iHeight = this.height; // work for in memory images.
$('#canvasEle').css({'width': iWidth + 'px', 'height': iHeight + 'px'});
});
Calculating image source.

Set an image to fill the canvas using Paper.js

I have an image that has the same aspect ratio as the canvas but a different resolution. I know I can make use of the view size, view.viewSize, but my trouble is setting the dimensions of the image. I have tried setting the width using raster.width = 2000;, for example, but it does not seem to work.

This ended up working for me.
raster.size = paper.view.viewSize;
raster.position = paper.view.center;

Use raster.bounds instead
(for width)
raster.bounds.width = 2000;
or
(for height)
raster.bounds.height = 2000;
So, you right, you should be able to get canvas size with:
paper.view.viewSize
and assign the raster the proper with/height