canvas

Javascript/jQuery: remove shape/path from canvas

I can't seem to find the function to remove a shape or path from the canvas after it has been created. So I'm creating a bezier curve between 2 points with beginPath(); bezierCurveTo(); stroke(); closePath(); . How can I remove this from the canvas once it's been created? I need to be able to call the remove function via toggle() and...

Why is setting HTML5's CanvasPixelArray values ridiculously slow and how can I do it faster?

I am trying to do some dynamic visual effects using the HTML 5 canvas' pixel manipulation, but I am running into a problem where setting pixels in the CanvasPixelArray is ridiculously slow. For example if I have code like: imageData = ctx.getImageData(0, 0, 500, 500); for (var i = 0; i < imageData.length; i += 4){ imageData.data[i...

How to bind a Canvas to a collection of items in Silverlight

Background I've got a collection of objects which I want to draw on a canvas. Each of these object has a DateTime property, which determines the position of that object along the x-axis on the canvas. Each object also has some other properties which determine the image that need to be drawn on the canvas. The most important feature t...

Drawing text at an angle (e.g. upside down) in Android

I'm trying to build a custom clock view in Android. See image http://twitpic.com/1devk7 So far to draw the time and hour markers I have been using the Canvas.rotate method to get the desired effect. However, notice that it is difficult to interpret the numbers in the lower half of the clock (e.g. 6 or 9?) because of the angle in which t...

SmartGWT Canvas width problem

I am having problems with showing my entire SmartGWT Canvas on my initial page. I've stripped everything out and am left with an extremely basic EntryPoint to illustrate my issue. When I just create a Canvas and add it to the root panel, I get a horizontal scrollbar in my browser. Can anyone explain why and what I can do to have the Canv...

JavaScript-clearRect()-pendant for ActionScript?

Is there a ActionScript-version of JavaScript's Canvas.clearRect()? I only know graphics.drawRect(...) which allows me draw but not remove rectangles. If there is no such method in ActionScript, how can I emulate it? ...

Canvas is stretch when using CSS but normal with old "width" and "height" properties

I have 2 canvas, one use old html "width" and "height" to size it, the other use CSS <canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas> <canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas> compteur1 display like it should, but not compt...

How can I get Firefox to update background-color on a:hover *before* a javascript routine is run?

I'm having a Firefox-specific issue with a script I wrote to create 3d layouts. The correct behavior is that the script pulls the background-color from an element and then uses that color to draw on the canvas. When a user mouses over a link and the background-color changes to the :hover rule, the color being drawn changes on the canva...

Adding UIComponent to both Canvas and Tree in Flex 3

I currently am trying to add a custom class which subclasses UIComponent to both a tree and a canvas, but when I try to re-order the tree by dragging I get this error: TypeError: Error #1010: A term is undefined and has no properties. at mx.controls::Tree/get firstVisibleItem()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\co...

Can JavaScript load raw bytes to use in HTML 5 Canvas?

Say I had a file like... http://my.website.com/myfile.raw and this file was just raw bytes, representing an intensity image. Is it possible to grab this data and read the bytes in JavaScript? And then using it with HTML 5 canvas (e.g., putImageData) to draw an image? Or is there some other way to do this in the browser without Java or...

How can I use custom fonts in an HTML5 Canvas element?

The title of the question kind of says it all. I've looked at things like Cufon and typeface.js but they seem to be SIFR alternatives and dont allow you to set freeform coordinates and draw custom type onto a Anyone got any ideas? ...

Attach text on path in Raphaël?

Does anyone know how to attach a text to a path in Raphaël? Something like http://www.w3.org/TR/SVG11/images/text/toap02.svg I know that jQuery SVG can do that, but I can't find an easy way to do this by using Raphaël js. I want to attacht this text to a bezier curve and move it. ...

How to blit() in android?

I'm used to handle graphics with old-school libraries (allegro, GD, pygame), where if I want to copy a part of a bitmap into another... I just use blit. I'm trying to figure out how to do that in android, and I got very confused. So... we have these Canvas that are write-only, and Bitmaps that are read-only? It seems too stupid to be re...

Techniques for Visualizing Data

I'm looking into providing several methods of visualizing a large volume of data. This may include, but will not be limited to, simple graphing. The techniques I'm exploring will involve shapes, text and lines. It will also involve interaction with elements (hiding, focusing, etc.) and animation (shifting, dragging, systematic reorganizi...

Most effective way to draw smooth animations over google maps?

I'm trying to draw an animation over google maps, hopefully using html5's canvas element. Is this possible? The animation is just along the lines of moving and rotating rectangles (simulating transit flows/traffic patterns), nothing fancy, but not something I see supported directly in the google maps API. Are there alternative map API'...

Draw a position from a 2d Array on respected canvas location

Background: I have two 2d arrays. Each index within each 2d array represents a tile which is drawn on a square canvas suitable for 8 x 8 tiles. The first 2d array represents the ground tiles and is looped and drawn on the canvas using the following code: //Draw the map from the land 2d array map = new Canvas(mainF...

How do I select 100 pixels (10 x 10 block) at a time with Canvas/Javascript?

Hello all, I'm trying to accomplish what's being demonstrated at this site for an experiment I'm working on. The blocks are to be selected via mouseclick I suppose. As a Javascript newbie, I don't know where to begin something like this myself. Adding the HTML canvas element into the mix (since it's gaining in popularity and pretty g...

Put DrawingGroup on a Canvas?

Hello, I have a DrawingGroup and I want to put it on a Canvas, but because DrawingGroup is no UIElement, this is not possible. Whats the best way to do this? And from which class could I derive, so that I could do something like canvas1.Children.Add(new myDrawingGroup()); (Meaning I want to add my DrawingGroup as one element on the c...

White screen between Canvases

Hello everyone, I am having, what i believe is a minor issue. I am developing a J2ME application which predominantly uses canvases for display. The problem is I have set all these canvases to fullscreen and when i navigate from one class to another i am first given a white screen and then taken to the canvas i intend to go. I am not un...

Flip <canvas> (rotate 180deg) after being published on page.

I'm trying to rotate a canvas element AFTER it's been appended to the DOM. Canvas is 600x50 and this is the code at hand: var canvas = document.getElementsByTagName('canvas')[2]; var ctx = canvas.getContext('2d'); ctx.translate(300, 25); // rotate @ center ctx.rotate(angle * Math.PI/180); which isn't accomplishing the task. Am I miss...