drawimage

I'm trying to scale an image proportionately to the canvas. I'm able to scale it with fixed width and height as so: context.drawImage(imageObj, 0, 0, 100, 100) But I only want to resize the width and have the height resize proportionately. Something like the following: context.drawImage(imageObj, 0, 0, 100, auto) I've looked everywhere I can think of and haven't seen if this is possible. context.drawImage(imageObj, 0, 0, 100, 100 * imageObj.height / imageObj.width) solution of @TechMaze is quite good. here is the code after some correctness and introduction of image.onload event. image.onload

I am using a GDI+ Graphic to draw a 4000*3000 image to screen, but it is really slow. It takes about 300ms. I wish it just occupy less than 10ms. Bitmap *bitmap = Bitmap::FromFile("XXXX",...); //-------------------------------------------- // this part takes about 300ms, terrible! int width = bitmap->GetWidth(); int height = bitmap->GetHeight(); DrawImage(bitmap,0,0,width,height); //------------------------------------------ I cannot use CachedBitmap, because I want to edit the bitmap later. How can I improve it? Or is any thing wrong? This native GDI function also draws the image into the

I'm using canvas for a game. I have a Sprite object which draws itself to the canvas, in the Sprite class I create the Image member along with it's src attribute when i create the object. Here's the code that's not working: Sprite.prototype.draw = function(Context){ this.Image.onLoad = function(){ Context.drawImage(this.getImage(),this.getX(),this.getY()); }; }; In the objects constructor i pass in a string param which is the file path to the Image - this is being stored correctly. I have a feeling the problem lies in a setImage function: Sprite.prototype.setImage = function(){ this.Image =

I am drawing on the canvas each time a user presses a button, however sometimes the image is not getting drawn on the canvas. I think this could be that the image isn't loaded in time before the context.drawimage function runs, as some of the smaller files sometimes get drawn. I've used the console and checked resources and so this is the only problem I can think of. How do I avoid this problem? This is my Javascript code. var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var questionbg = new Image(); var answerbg = new Image(); //this code is inside a

Ok so I'm creating a game with JavaScript Canvas Elements and such. I've been able to load in TONS of Images, but on a select few, JavaScript replies with Errors such as Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided. Which makes NO SENSE at all, because the same code works in other places!?! Here is an example I have in my code: board.drawImage(document.getElementById("player_explode"), this.x, this.y); Inside of an objects method, Player.die() , respectively. Does anyone know why this behaviour is

I am writing some code that uses HTML5 canvas. Generally it works well, but now I found a very strange behaviour. The weird thing is that it is consistent on different browsers, so must be that I understood the thing wrong... Despite the docs seem to say exactly what I am doing. Here is the code (it's an object method): MyCanvas.prototype.getElement = function() { var innerHtml = "<div></div>"; var elem = jQuery(innerHtml, { 'id' : this.viewId }); var canvas = jQuery("<canvas/>", { 'id' : this.viewId + "canvas", 'width' : this.width, 'height' : this.height }); var w = this.width; var h = this

It's possible to send a CanvasPixelArray obtained via getImageData to a worker script, and let the worker script manipulate the pixels in its background thread, and eventually post the manipulated pixel array back. However, I'm using native canvas drawing functions, like drawImage . The drawImage calls are currently blocking the UI thread. This causes slow redraw of buttons, and a noticeable delay when clicking on a button, just to name a few drawbacks. (Edit: A small improvement can now be accomplished with ctx.imageSmoothingEnabled = false , at least on WebKit with the webkit prefix.) I'd

I am making a simple web app in mobile which allow visitor to capture photo by using html5 input[type=file] element. Then I will display it on the web for preview, and then visitor can choose to upload the photo to my server for other purpose(ie: upload to FB) I find a problem on the orientation of photo when I take photo using my iPhone and hold vertically.The photo is in a correct orientation in tag. However, when I try to draw it into canvas by using drawImage() method, it is drawn 90 degree rotated. I have tried to take photo in 4 orientations, only one of them can draw a correct image in