Develop Reference

Centering an html canvas causes lines to shift using angular drawing library angular-canvas-painter

Using this angular library to enable drawing on canvas on mobile devices:
https://github.com/pwambach/angular-canvas-painter
My issue is that if I center the canvas element (or it's parent element), the drawn lines "shift" to the right after touchend/mouseoff event. That is, they appear correctly positioned as I'm drawing (they follow my finger/mouse), but on release they move to the right.
I've been trying to implement a fix along these lines:
Why does CSS centering mess up canvas mouse coordinates?
But to no avail. Any suggestions are much appreciated.

Can I use something like Raphael.js to draw vectors above the HTML window?

There are a lot of questions regarding drawing on the canvas element and using things like Raphael.js (which is pretty awesome), but I'd like to know if there is a way I can draw some vectors (mostly diagonal lines) above the DOM document rendered in a html doctype webpage.
I haven't done much with the canvas element but I think it might be possible to do something like this with perhaps:
getting / monitoring the window size with javascript
creating / resizing a canvas element that takes up the whole page
somehow setting transparency on the canvas element
drawing the vectors that I want
When you use a clear .gif you can't click on or interact with the things underneath it - I would like to still be able to interact with the webpage normally. I would also like scrolling to move up and down the page normally so the vectors would scroll with the DOM elements.
Am I heading in the right direction with this?
How can I draw vectors above the HTML / DOM in a standard webpage?

Here's an example of Raphael.js drawing on top of text in a div http://raphaeljs.com/spin-spin-spin.html
Some more background on Raphael:
Raphael draws on an SVG canvas. If you give that a transparent
background and position it over the window (z-index), then you can get
the appearance you seek.
https://groups.google.com/forum/?fromgroups=#!topic/raphaeljs/SAPCl_UMNco

How to dynamically crop/scale images in a website

I need my site to be able to resize and crop an image based on the viewport on a browser. I've so far managed to dynamically resize it with an imagemap, but can't seem to crop it dynamically. I'd like it to crop and scale simultaneously without distorting an image. The image I'm using is 1920x1080 which is far bigger than most browsers so cropping the edges while scaling would make it appear similar on different browsers.

I use this jQuery plugin quite often. :)
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/

It sounds like you can already detect the viewport size somehow. You just need the CSS or javascript to crop an image. In that case, I'd recommend this article:
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
You could
1) Use negative margins.
2) Absolute position the image in a smart way.
3) Use the CSS clip property.

Image inside canvas crop with custom rectangle JQuery

I have a Canvas element with inside an image ( the canvas has the same dimension of the image), i want to crop this image using a selection rectangle! For my project i use the javascript's framework JQuery and i'm searching a plugin that implementing a custom selection rectangle on canvas!
Anyone know one plugin that do this (I founded a lot of plugin that implements this functionality but only on elements)?
If no, what is the way to implement a custom rectangle on Canvas elements?
I hope in yours answers!

did you tried using Fabric.js to generate rectangle on Canvas ?

Usually, everything that is drawn onto a canvas will automatically change the canvas content. If you want to draw a rectangle with the mouse without destroying the underlying canvas, the usual way is to add an additional (temporary) canvas on top of the original canvas. The new canvas has a transparent background, so the underlying canvas is fully visible.
Now you draw the rectangle on the temporary canvas (which has the same dimensions as the origianl) and store the coordinates of the selection to apply the crop process on the original.
Please see my example here: http://jsbin.com/apitak/4

Why doesn't translate works for the canvas in a div?

I have 2 canvas in a div. I tried to translate one of the canvas, but it didn't work.
http://jsfiddle.net/VkbV5/ shows the case where i commented off the translation line:
this.innerElement2Ctx.translate(100,100);
But when I include the line, the small square disappeared. Why? If you run this page in browser and inspect the innerElement2, you will see that it didn't move at all, but the small square disappeared.
For your information, I need 2 canvas, because I am planning to attach mouse event to innerElement2.

Translating a context adjusts where the 0,0 point is for future drawing commands; scaling a context adjusts how large items draw on the canvas; rotating a context adjusts the direction that items are drawn. None of these context transformations adjust the size or position of the canvas box itself.
Here's an example I made of adjusting canvas transformation so that drawing the same commands allows the user to zoom and pan around a canvas drawing:
http://phrogz.net/tmp/canvas_zoom_to_cursor.html
If you want to move the placement of a canvas within your HTML page, use simple CSS placement as you would with any other element, e.g. a <div>.
If you want complex 2D or 3D transformations you can use cutting edge features of CSS for this (as supported by modern browsers). For example, see:
https://developer.mozilla.org/en/CSS/transform#CSS_transform_functions