Hi, I'm searching for a good method to upload a canvas element from Firefox to a webserver or database to have the ability to reload it later. My ideas: 1. my first idea was to use getImageData() and save the canvas as an ImageData object to the database, but this might not a good solution because these objets can get quite large. 2. s...
So I have a bunch of javascript to make some random points, and then connects them via a minimum spanning tree. That all works fine. Then after that it draws the points and paths onto the canvas; and it draws an image like this: - Randomly generated each time. The problem I have with this, is that I'd like to have each of the circle...
Basically, I'm trying to do 3D projection on a 2D canvas with simulation of depth. As a general rule, bodies that are further away are "shaded" more and smaller than bodies that are closer to the viewer. The only thing missing is having bodies that are further away always drawn behind bodies that are closer. Sometimes, bodies that are ...
I am trying to draw two parallel lines on the canvas, but seems like properties of the latter overwrites the former. Please suggest what could be wrong : <html> <head> <script type="application/javascript"> function draw() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // draw a 10 pix...
Hi all, We are a new startup that is going to develop a web app for the Fashion industry. We were thinking of going with canvas (are not bothered about IE support) but now after reading about Raphaeljs and jQuerySVG, we are intrigued as to the possibilities of building the entire interface & units in SVG. Here are the advantages that c...
I'm working on creating an Air Hockey-like game using HTML5 canvas and Javascript. I've gotten pretty far, but detecting the collision of the mallet and the ball has me stumped. I've tried using the distance between the two circles and distance squared (to conserve CPU by bypassing square root). I can't figure out why the collision is no...
So I'm making a tower defense game with HTML5 and Javascript. My sole problem is detecting when the mouse comes in contact with the attacker's pathway, which is necessary in order to stop the player from building towers on the path. The path of the attackers is determined in the MAP.js file (see the link at the bottom), by a two dimensio...
I'm seeing a lot of questions about how to get the html5 canvas element to receive mouse clicks, I'm using the canvas as an overlay and the mouse clicks aren't going through to the elements below. I'm loading an image into the canvas, and I thought that might be the problem but I've also tried it with an empty canvas and I get the same ...
Do you have to first draw any source images into the canvas before you can obtain the pixel array data? or is there a better way? such as having a second hidden canvas? I am using several images that I will mash together, and draw into the main canvas. What is the best way to obtain to say backgroundData, objectsData, effectsData, from ...
How do I redraw the pixel array after I after I have previously used getImageData? The way that I thought made sense gives me the error: An invalid or illegal string was specified" code: "12 function makeImage(canvasId, background, object) { var canvas = document.getElementById(canvasId); var ctx = canvas.getContext('2d'); ...
I want to build a web app using either canvas or SVG. But I would like to use a library that gives me some pre-made ui components like file menus or forms. What are some of the libraries out there that could accomplish this with either of these technologies? ...
Hey guys, Could someone give me an explanation of the 3rd & 6th params of the following Canvas method: createRadialGradient(0, 0, 50, 0, 0, 100); I've been told they're radian values and I'm not familiar with those types and would like to understand how to use them properly. Thanks. ...
I have a semi-transparent shape: ctx.fillStyle = "rgba(255, 255, 255, 0.5)"; ctx.beginPath(); ctx.moveTo(0, 150); ctx.lineTo(300, 0); ctx.lineTo(300, 450); ctx.lineTo(50, 500); ctx.closePath(); ctx.fill(); I want to add a bit of shadow, but I want it to only appear outside of the shape, I guess more of a glow than a shadow. Is t...
I don't understand what the Transformation Matrix is and how to work with it. The following will draw a circle at 0, 0 of my canvas: (generated from an svg converted with svg2canvas.jar) drawPoints: function(ctx, max_points) { ctx.save(); ctx.setTransform(1, 0, 0, 1, -551.23701, -368.42499); ...
I used expression design to export my vector image as a .xaml canvas. I then included this file in my project. I have a button that I want to set the content to this xaml described image. Any help would be appreciated. Should I set the .xaml canvas image thing to have its build action be resource? What's the xaml look like that conn...
I have a canvas in the middle of my application with controls around it. I have a socket that recieves Points and saves them in a list. I draw small 4x4 rectangles on the canvas for the number of points in my list.. say theres 4 points.. theres 4 rectangles. I want to be able to move the rectangles when the points change with code. is ...
I am looking to play and loop only certain parts of a video with the html5 video player. I am hoping for something like loopstart and loopend attributes for the audio player, but have not found documentation that states that this is available for video. An example of what I would like to do: when the page loads, the src video plays f...
How do you blend two arrays of pixel data to create one image? with the option of using different blending modes? ...
Consider the following code: procedure TForm1.PaintBox1Paint(Sender: TObject); var vRect : TRect; vFormat : TTextFormat; vStr : string; begin vStr := 'This is some text'; vRect := rect(10,10,50,130); vFormat := [tfCenter,tfVerticalCenter,tfWordBreak]; PaintBox1.Canvas.Rectangle(vRect); PaintBox1.Canvas.TextRect(vRect,vSt...
Any straight forward way to measure the height of text? The way I am doing it now is by using Paint's measureText() to get the width, then by trial and error finding a value to get an approximate height. I've also been messing around with FontMetrics, but all these seem like approximate methods that suck. I am trying to scale things for...