We Keep Coding

CSS transform on image getting pixelated

I'm resizing an image with setting the width/height dynamicly with css and using transform duration to smooth this process. However it is working but once the animation started the image gets pixelated. Occurs in Firefox and Chrome, i didnt test any other browsers.

Your height is fixed, before and after the resize, it could have something to do with it?
Try and amend the javascript to also set the final height of the div, if you want to maintain aspect ratio, see http://andrew.hedges.name/experiments/aspect_ratio/
from the initial 350x64 the final dimension should be 250x46

Making images respond to browser resize with both width and height

I have been trying to make images resize proportionally, leaving whitespace, so they are always fully seen in the browser window without having to scroll. All of the solutions I have found so far can resize the image based on the browser window width, but if the proportions of the browser window don't match the image, then it will cut off the image and the user will have to scroll down to see the rest. I know that there is also background-size: cover; but I don't want the image to be clipped. Any ideas?

You can try vh and vw units in CSS. And accaptable by almost all browsers.
img{width:vw;height:vh;}
The drawback is image may shrink... So you can try with overflow hidden.
img{width:vh;height:vh;overflow:hidden;position:center;}

You want the object-fit: contain property if you're using <img>, or background-fit: contain if it's a CSS background-image.
http://codepen.io/robinrendle/pen/BywNVX
object-fit doesn't have perfect browser support, but there is a polyfill for it.

HTML5 Canvas using easeljs pan

Does anyone here have a good example of panning using Easeljs? I am actually animating a ball inside a large canvas, about 5200x7400. I am able to center the ball on the screen using a div that contains the canvas, setting it to overflow scroll and then using the function tick() to set the scrollTop and scrollLeft of my <div>.
I just want to do this using pure canvas because when I try to use my site on Android 4.0, scrollTop and ScrollLeft don't work.

Is there a reason you are using such a large canvas, instead of just moving the contents within the canvas? A big canvas like that will have quite a huge impact on memory and performance - whereas translating a Container inside the canvas is fairly insignificant.

Resize and scale HTML5 Canvas and contents

I am working on an application that incorporates a drawing interface (like Paint or Photoshop) as an HTML5 canvas element.
I would like to be able to dynamically resize the canvas element and the pixel data on it to simulate zoom functionality. My thoughts are having some kind of a viewport which contains the canvas element. I could then resize the canvas and its contents inside of the viewport (which stays the same size).
How would I best implement this functionality?

You can do this very easily by seperating the display from the drawing surface by introducing another canvas. Create a hidden canvas using
var canvas = document.createElement('canvas');
Then draw your entire scene to this canvas. Then draw the contents of this canvas to another canvas that is actually visible to the user using the drawImage method (which may also receive a canvas instead of an image). If you want to draw your scene zoomed in, you can do this by making the source rectangle (the sy, sx, sw and sh parameters on drawImage) on the hidden canvas smaller, when drawing it to the visual canvas. This will give you the zooming effect.
However, if you completely redraw each frame on your canvas anyway, you may also simply have a look at the scale method of the canvas object.

I'm having success using transform: scale() on a canvas element and its contents.
However in situations where the canvas element needs to be brought in with an iframe and the transform: scale happens on the iframe it works on safari but not mobile safari. Relevant link below
https://stackoverflow.com/questions/11265483/inconsistencies-when-transform-scale-on-iframe-containing-canvas

Getting image dimensions after browser resize

I have a div with a image I want to center inside. The image will be different everytime and has a max-width and max-height css property. Problem is, the image.onload function I use to do the math with the image.width and image.height, gives me the images dimensions before its scaled down by the browser. :( how can I pull this off?

If you mean that you have an image that is, say, 200x200 pixels, and has been resized to (say) 150x150 pixels because of the CSS properties, then image.width and image.height should work fine. That is, they should give you 150x150, and not 200x200. (See here for the mozilla reference.)
Alternately, you could try element.clientWidth and element.clientHeight (https://developer.mozilla.org/en/DOM/element.clientHeight), which give the rendered sizes of any DOM element.
I haven't tested this in IE, but it should work fine there as well. (The MSDN reference page for width is here. You can also find clientWidth there.)
What browser are you testing on?