It does show text, but in the completely wrong place (not even on the Canvas element itself!), and in the wrong color (always black). Has anyone had experience with this or gotten it working? ...
Save PNG (etc.) work in this demo in Firefox, but not Chrome. Convert to PNG (etc.) work in Firefox and Chrome. Is there a way *in Chrome* to save an image of a canvas element to a local file -- or to a server? ...
I have the following piece of HTML: <style type="text/css"> #c{width:200px;height:500px} </style> <canvas id="c"></canvas> <script type="text/javascript"> var i = new Image(); i.onload = function () { var ctx = document.getElementById('c').getContext('2d'); ctx.drawImage(i, 0, 0); } i.width = i.height...
I want to implement zooming on the mouse pointer with the mouse wheel. That is scaling the image while the point under the mouse pointer stays fixed. Here is my code, which doesn't work very well var scala = 1 + event.wheelDelta / 1000; canvas.context.translate(-canvas.mouse.x * ( scala - 1 ) / canvas.scale,-canvas.mouse.y * ( scala - ...
I have a canvas like this: <Canvas> <Rectangle Fill="Blue" Opacity="0.5" Canvas.ZIndex="1" /> <Grid Canvas.ZIndex="0" > ...bla bla bla... </Grid> </Canvas> I need the Width/Height of the Canvas to just stretch to the Width/Height of the Grid, but then I need the Width/Height of the Rectangle to stretch to match...
The title resumes everything. :P ...
I want to be able to zoom in on the point under the mouse in canvas with the mouse whell, like when zooming on maps.google. I'd like straight code as I've been working on this for 5h+ 15h Something to start with: After 2 weeks break I did it in 3 min, here is the working code: <canvas id="canvas" width="800" height="600"></canvas> <sc...
I have a page where a user can draw on the canvas and save the image to a file on the server. The canvas has a default black background. Is there a way to check if the user has drawn anything on the canvas before submitting the data URL representation of the image of a canvas with the toDataURL() function? So if the user doesn't draw an...
Hi guys, I have a custom WPF Canvas, upon which I would like to show a grid. I do so by overriding the OnRender method on Canvas, and using the DrawingContext drawing functions. IsGridVisible, GridWidth, GridHeight are the number of pixels between each grid line horizontally and vertically respectively. I also use a ScaleTransform on t...
I am targeting google chrome. Is it possible to draw transparent images on a canvas? By transparent I mean the drawing the entire image at something like 50% opacity. ...
I'm trying to use <canvas> in iPhone Safari, and if I place the element in the body, there are unused pixels to the left and top of the element. I tried specifying margin:0;padding:0 with CSS to no avail. What's going on here? <html> <head> $(document).ready(function() { $('#screen').attr("height", $(window)...
Hi, I am having a custom canvas derived from Canvas. It contains few ApplicationCommands like New/Open/Save etc. added like this - this.CommandBindings.Add(new CommandBinding(ApplicationCommands.New, New_Executed, New_Enabled)); New_Enabled always returns true. This control is used in a wpf project having a menu bar; New/Open/Save ...
I'm drawing an Image on the canvas using the drawImage function. This is how Im setting the src property of the image: var img = new Image(); // Create new Image object img.src = 'test.php?filename=myfile.jpg' and then oCanvas.width = 600; oCanvas.height = 400; oContext.drawImage(img, 0, 0, 600, 400); The problem ...
I am drawing on a canvas with the following line: ctx.drawImage(compositeImage, 0, 0, image.width, image.height, i, j, scaledCompositeImageWidth, scaledCompositeImageHeight); This code has executed error free on Safari, Chrome, Firefox (and even IE using google's excanvas library). However, a recent update to Chrome now throws the fol...
I'm working on a script, and a small part of that involves taking a canvas and converting it to a downloadable image. To do this, I do: var thumb_jpeg = thumbnail.toDataURL("image/jpeg"); $("#" + options.dest).attr('src',thumb_jpeg); ...where thumbnail is a canvas tag and options.dest is the name of an img id. This code works perfec...
I have the following working code: ctx = document.getElementById("canvas").getContext('2d'); Is there any way to re-write it to use $? Doing this fails: ctx = $("#canvas").getContext('2d'); ...
Since the webgl/opengl doesn't support text drawing, so it possible to draw 3D object using 3D context and text drawing using 2D context ? ...
I'm trying to find information on how to change the coordinate system for the canvas. I have some vector data I'd like to draw to a canvas using things like circles and lines, but the data's coordinate system doesn't match the canvas coordinate system. Is there a way to map the units I'm using to the screen's units? I'm drawing to a...
Does the Canvas element have the equivalent of img's map, so you can define clickable areas on the canvas element? There is brief mention of a map halfway down the page here: http://www.w3.org/TR/html5/the-canvas-element.html, but I can't find anything else about it. ...
I have an approach in mind for an image viewer in a web app, and want to get a sanity check and any thoughts you stackoverflowers might have. Here's the whirlwind nutshell summary: I'm working on an ASP.NET MVC application that will run in my company's retail stores. Even though it is a web application, we own the store machines and hav...