We Keep Coding

FabricJS export relative to canvas

I'm building a authoring tool in FabricJS which is meant to export something for android devices. It's decided that I will support only 6/9 screen ratio (other screens will get black borders).
My problem is that I open the page on my pc, add and edit some elements and export ( using the fabricjs serializer ) and then I open on a laptop (different display size), the canvas gets resized correctly (with some js magic) but the elements are still at the same location and same size as on the big display
.
The problem is that FabricJS does not create elements relative to canvas size.
I can write my own export/load functions, but it feels wrong because each element has width, height, scaleX and scaleY. Using the handles changes the scale for some reason. This leads me to think that there is something like a canvas scale, but there is not.
Am I missing something? How does one go about exporting and then opening on a different screen, but maintaining the canvas ratio and having elements relative to the canvas size.

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

Ability to zoom in/out and shaking canvas on ipad

We have been trying to build a map for a client where users can:
Use a joystick to navigate left and right
Zoom in/out on the canvas
Select a specific building and have that center align for them
Everything works great on a PC but when we try to use an iPad 2 problems happen:
The screen becomes quite shaky
When you zoom in on the screen the quality of the map drops, even though the map is over 10mb and the quality is good for some reason it becomes pixelated.
URL: http://bit.ly/1MDcVhV
Does anyone have experience with such problems.
Thanks.

HTML5 large canvas - moving and zooming whole content including background

My final is goal to implement a app like http://www.crystal.ch/abb/power_systems_landscape/ using html5.
As you see, we may need a large(2000*600) canvas, but im not sure.
Can anyone give me idea just for following behavior of above link ?
whole canvas content including background can move left-right smoothly using mousemove and mousedown operation
whole canvas content including background move left-right smoothly according to power system selection
Zoom in zoom out
Fade out effect like plus iconic circles
Any kind of idea would be appreciated.

basically you want something like this
<div id='wrapper' style='position: overflow: hidden; relative; width: 500px; height: 300px;>
<canvas id='canvas' width='2000' height='600'></canvas>
<div>
then when you want to scroll you would do something like
document.getElementById('wrapper').scrollTo(x, y);
and zooming would be
document.getElementById('canvas').style.width = 2000 * zoom;
document.getElementById('canvas').style.height = 600 * zoom;
You can play around with setInterval and what not to get the scrolling and zooming nice and smooth, but that's definitely be the fastest way to get those effect on a large canvas since there's no redrawing involved.

I recommend if you are working in 2D canvas js, that does not utilize zoom or move the canvas element, or any other html elements, you better write an algorithm within the draw function. Zoom is the death of quality and speed and can be complex from zoomin to zoomout (Don't forget all visible data on canvas is just a image).
I managed to upload a picture of 13000 px and multiplayer avatars to show all of an algorithm within the draw/update functions.
If you use 2 canvas you can crop from code big images and then composite to the visual map.
  If you have too much image width > 3000 ps must be divided by lower level (on iOS devices for image ~> 3000px comes to be negative scale - image comes smaller ).

Scaled Transparent PNGs lose anti-aliasing after jQuery animation in Webkit browsers

I have a script that lays out these circular icons on the map, you hover over them, they spring up, text appears, etc. The icons are scaled relative to their position on the map, ie, the distance from 0 on the y-axis. I've tried to set the scale through CSS's width and height attributes and through the html width & heights on the img tag and still have the same problem:
Basically, in their dormant state, such as when the page is first loaded, or the user flicks between tabs, the images (trans' PNGs) are anti-aliased. However, when the hover() function, and thus the animate() function, is invoked, the images suddenly become jagged and horrid. I've noticed that this behaviour doesn't exist in firefox but does in safari and chrome. I don't know whether this is to do with Webkit, jQuery or just javascript itself but maybe someone could shine some light as google resulted in nothing. Any thoughts? :)
Please also note that the bottom left and bottom right icons look fine in both attached screenshots- they're unscaled ones!
Thanks a lot :)
Matt

i can only guess on this, but my assumption is that gecko and webkit use different scaling algorithms for images. thus it has nothing to do with javascript, jquery or png at all.
in fact, the image still has antialiased edges even in the webkit screenshot. (you see that when you zoom in)
the border is just messed up which is usually the result of a bad scaling algorithm.
try the following to confirm this assumption:
<img src="youricon.png" width="90%" height="90%">
and compare the result in the two browsers. you should see the same problem.
possible solutions:
make a smaller version of the image and replace image with the smaller one on hover instead of scaling it.
use a scalable vector graphics format like SVG for your icons.