Resize html5 canvas width/height element to its content

I   needed method to resize the width of my html5 canvas so that it was the total width of its content.

Im looking for a similar method to the one below. Unfortunately you can't change the width of a canvas element half way through your code with out redrawing it.... pants.

I think theirs away to save the content of the canvas to an image before you re-size the width.
After which you simply redraw the content after re-size.
...I couldnt get it to work so my codes a little bit more drawn out.




var canvas;
var context;
var width;
var height;

function domLoaded(e){
canvas = document.getElementById("scroller");
context = canvas.getContext("2d");
width = canvas.getAttribute('width');
height = canvas.getAttribute('height');
var imageObj = new Image();
canvas.style.backgroundColor="red";

imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
var txt = "Doesnt matter how much text you put here the canvas will resize.";
context.font = "15pt Calibri";
context.fillText(txt,imageObj.width, 15);
var totalWidth = context.measureText(txt).width+imageObj.width;
canvas.width = totalWidth;

width = canvas.getAttribute('width');
context.drawImage(imageObj, 0, 0);
context.font = "15pt Calibri";
context.fillText(txt,imageObj.width, 15);
};
imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg";



}
document.addEventListener("DOMContentLoaded", domLoaded);

draw html5 canvas element to a master canvas element

I wanted a method where by I could group elements together and then draw that group to my main html5 canvas element.
So from a flash point of view this would be similar to creating an empty moving clip and then using addchild add content to that movieclip.
Then add the movieclip to the stage.


So I found this post....
http://kaioa.com/node/103

I kind of got it... But I'm a little new to javascript and to me it seemed a little bit complicated to having methods sent into other methods.

So I changed it a little for somthing that sits more comfortably in my brain sells!

My code looks like this and was just what I was after...


var canvas;var context;var width;var height;


function domLoaded(e){
canvas = document.getElementById("scroller");
context = canvas.getContext("2d");
width = canvas.getAttribute('width');
height = canvas.getAttribute('height');

var renderToCanvas = function (width, height) {
var buffer = document.createElement('canvas');
var canvasCradle = buffer.getContext("2d");
buffer.width = width;
buffer.height = height;
  canvasCradle.font = "15pt Calibri";
canvasCradle.fillText("Morning all!", 25, 20);
return buffer;
};

var cached = renderToCanvas(150, 25);
context.drawImage(cached, 0, 0);

}
document.addEventListener("DOMContentLoaded", domLoaded);



So on Dom load I GET my canvas element that has an id called scroller from my html markup.

I get its width/hight/context ect and set them to vars.

Now Im ready to create a new canvas element to be drawn to "canvas"

Ive created cached which is equal to the method renderToCanvas
This then creates a new canvas element
I can treat that like any other canvas elements... add what I want to it. I return that canvas element

Cached is now that element I created on the fly and I can now use drawImage on master canvas to draw it to screen.

new app simple lists

I released my new app to the android market on Saturday afternoon. "simple lists"

Does what it says on the tin. Its a simple way to make lists. 

You start by naming a list and giving a description and then your free to add list items to it.

Once you have added your list items you can then swipe them left/right to mark an item as done or not done.

Both lists and items can be deleted  by holding your finger down on a item.

Theres also an info button that allows you to see more information about the list or item.

Thats pretty much it really!

Its taken me three months of weekends and evenings to put together.

Ive developed it using the corona sdk. Ive learnt alot, setting up sqllite databases and touch events within a scroll widget. 

But thats my last app, Ive done two now and not received a penny. 

I will hopefully be porting both googly face...

https://play.google.com/store/apps/details?id=com.googleeyes&feature=more_from_developer#?t=W251bGwsMSwyLDEwMiwiY29tLmdvb2dsZWV5ZXMiXQ..

and my new app "simple lists"...

https://play.google.com/store/apps/details?id=com.simplelists&feature=more_from_developer#?t=W251bGwsMSwxLDEwMiwiY29tLnNpbXBsZWxpc3RzIl0.

...to the apple market soon. I dont expect them to excel, but its been a good experience working with lua and corona. I think its put some decent feathers in my hat as well.