We Keep Coding

Rotating an Image object before drawing on canvas - HTML

I have an Image object like below:
imgObj = new Image();
imgObj.src = "http://localhost/images/img1.png";
imgObj.onload = function () {}
and I want to draw this image on a canvas when a button clicked. In each click the image draws on it but I want to rotate object before drawing because I don't want the result fall over and I need it seen differently.
I'm using javascript and jQuery in my project. so is there any solution for this?

This should work:
imgObj.style.transform = "rotate(90deg)"
It sets the transform css style property on the image object.

How can I copy a hidden canvas object to image without a blurred image

I am rendering a QR code to a div, however the div is hidden. When I copy the canvas to an image with the correct size, the image is blurred.
var children = $("#trial").children();
var canvas = children[0];
var ctx = canvas.getContext('2d');
//ctx.scale(3,3);
var img = new Image();
img.width = "300";
img.src = canvas.toDataURL();
$("#imagetrial").html(img);
I have tried scaling it as in the commented code, but the raw image turns out small, and when stretching the image it is blurred. If the div is not hidden, the code works correctly, but I cannot show the canvas, I am only interested in the data url which is passed on to a pop up print page.
Does anyone know a way to adjust the canvas size in the hidden div so that it copies correctly?

You can set the width of a canvas (onscreen or offscreen) like this:
canvas.width = 300;
You may be running into some subpixel issues regardless of canvas and image size matching.
Every canvas applies anti aliasing that CANNOT be turned off if the image you're generating on the canvas contains graphical elements or images drawn at sub pixel coordinates.
See this article: http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation

I ended up hiding the div by placing it offscreen, then the canvas gets copied correctly.

Saving Canvas with the background image

I have a HTML5 canvas element with a background image. User is allowed to draw on the image and then need to save the complete canvas element with the background. I'm using below code for saving part but it only gets the canvas drawing but not the background image. what could i do to get the background image also?
var canvas = document.getElementById('your_canvas');
var context = canvas.getContext('2d');
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
Update:
My HTML
<div name='coords1' class='canvas-area input-xxlarge' disabled
placeholder='Shape Coordinates' id='imgDiv'
data-image-url='BackGround.jpg'></div>
I have the above div in my HTML page. then i dynamically create the canvas and draw on it. It's a bit lengthy code.

Don't use image on the div, draw the image on the canvas ..
use the following code to draw image on canvas,
var img=new Image();
img.src=/*image src*/;
var ctx=canvas.getContext("2d");
img.onload=function()
{
ctx.drawImage(img,x,y,width,height);
}
After image drawing completion at img.onload callback , allow user to draw on canvas...
Now save the canvas drawing....

To Get the Canvas with backgound Image
context.globalCompositeOperation="destination-over";
drawImage(yourBackgroundImage,0,0);

Setting canvas Width and Height according to that of image dynamically

I am working on a project where I have to listen for paste event and save the image from clipboard to server and display it on canvas for further drawing.
What is working: get clipboard image and save it, displaying the image on canvas as background.
What is not working: resizing canvas so that whole image can be displayed. Also, while saving, I does not save the drawing on background image rather it only saves the drawing.
I tried
var newImg = document.getElementById('justimg');
newImg.src = data.showthis;
newImg.onload= function(){
curHeight = newImg.height;
curWidth = newImg.width;
alert(curWidth);
alert(curHeight);}
to get image attribute but its showing canvas attributes only.
<img id="justimg">
<canvas id="bearimage" ></canvas>
Also please suggest how to save canvas drawing with background image.

You need to get the canvas element and then change its width and height like this,
var newImg = document.getElementById('justimg');
newImg.src = data.showthis;
newImg.onload= function(){
var canvas = document.getElementById('bearimage');
canvas.height = newImg.height ;
canvas.width = newImg.width ;
alert(canvas.height);
alert(canvas.width);}
To save canvas image you first need to draw the image on it and then you can save it!
Here is a link to save image, http://www.nihilogic.dk/labs/canvas2image/

html5 canvas image resize

How to resize image already drawed in canvas?
I tried this with no luck (image is showing, but it doesn't resize):
var drawBall = function(mouseX, mouseY){
ballimg = new Image();
ballimg.onload = function(){
ctx.drawImage(ballimg, mouseX-25, mouseY-25);
ballimg.height = 5;
throwed = true;
};
ballimg.src = "ball2.png";
};

You can not resize an object which is drawn on the canvas.
What you need to do is redraw your object.
clear the context where the old Ball is located ctx.clearRect(x,y,x2,y2)
and draw a new Ball with the new size.
If you want to animate things on the canvas. The way you do that is to keep track of all your objects and redraw the canvas(every single object) for every frame.