I am reading a book on Html5 and about canvas, the following code will generate 1-pixel thick lines... It uses 0.5 as the coordinate. If it is changed to 0 or 10, or some integer, then the lines will be gray, and 2-pixel thick. Why is that? That the strangest thing I have seen lately... all the programming before on Apple or Win32 AP...
How do I merge a smaller image on top of a larger background image on one canvas. The smaller image will move around. So I will need to keep reference of the original background pixel data, so that the each frame the canvas can be redrawn, with the overlay in its new position. BgImage: 1280 x 400, overlayImage: 320 x 400, overlayOffsetX...
I'm making a small game using the HTML5 canvas element. It works great, except that it has a scrolling background with obvious tearing happening in Firefox and Chromium browsers in Ubuntu. I'm pretty sure it's buffered because there isn't any of the flickering I'd expect; just tearing. Is there any way to work around this or time rend...
Has anyone come across an effective way to mimic Webkit's -webkit-mask-box-image: url(filename.png) functionality? I'm trying to use non-square animated elements, and would prefer not having to do the masking on server-side. I'm set on supporting at least Gecko and Webkit, but if I can manage Opera and IE, that would be a bonus. ...
How do I blend these two sets of pixelData? The maskArray specifies the pixels to use from the OverlayData. These need to be merged with the backgroundData, and inserted back into the main canvas as newBackgroundData, and as offsetX changes update as needed. update I think I have found a solution: simply create another hidden canvas, a...
I have a square canvas with a width of 100 and a height of 100. Within that square I draw an arc like so: var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.clearRect(0,0,100,100) // clears "myCanvas" which is 100pixels by 100 pixels ctx.beginPath(); ctx.arc( 50, 50, 30, 0, Math.PI*2/6 , false )...
I'm looking for something like this: http://3.paulhamill.com/node/39 I want a circle (or image) to smootly go up (and fade in/out with a alpha effect). Is there any tutorial out there? If not, I will dive in html5, but if there is a source code out there I would appreciate it if somebody can provide me withit. Thanks! ...
I'm interested in making a game using html and javascript. I was wondering if it really is that much faster drawing in html5 and javascript than it is with images and div's in html and javascript. Example of a game using html and javascript that works nicely: http://scrabb.ly/ Example of a game using html5 and javascript that works ni...
How to drawText when button click? How can i setContentView(R.layout.main) to see the button and draw the text when button click? I cannot make it, and below is my code for drawing text.public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); drawView = new DrawView(this); setContentView(drawView); } ...
I have a point on a canvas that I want to place an ellipse. I want the centre of the ellipse to be over this point. At the moment the top left most edge of the ellipse is over this point. I know I can shift the ellipse programmatically on the canvas but I was wondering if there is a way to tell WPF to centre the element over the point i...
I have a canvas with two lines of text on it. I want to animate these 2 lines differently. How to do this? How can i only animated one line of text without clearing the whole screen? ...
(In every browser I've tried) double-clicking on an HTML5 canvas selects any text immediately following the canvas element. I'd prefer to keep the clicks confined to the canvas. (N.b.: I don't want to disable text selection entirely (e.g. like this): if you double-click the text it should be selected. I just don't want the clicks to "...
hi, i need to create a component using html5 canvas that given an image the user can paint on it and directly (via a kind of save button) upload it's customized version on the server. Can i use html canvas for it ? Any suggestion ? thx in advance ...
I was thinking of making a game using javascript for the game logic and the HTML5 canvas element to animate the drawing. My goal is to write something that works in browsers and on newer smartphones. So I wrote up a quick program that moves 100 circles around on the screen and shows me the frame rate. I was fairly disappointed with the r...
I am writing to a canvas from a thread. public void draw(Canvas canvas) { Paint p = new Paint(); p.setAntiAlias(true); p.setTextSize(30); p.setColor(Color.WHITE); p.setTextAlign(Paint.Align.CENTER); canvas.drawText("Centered", xCentre, yCentre, p); } My problem start when I have a multi colored SpannableStringBuilder whic...
I'm looking for a way of capturing a section of a web page as a transparent-backgrounded PNG. This would mean that the transparent background property would be truly transparent. A root level element, instead of displaying white, would create a png with a transparent background. However, I suspect the behavior I'm looking for just isn't...
In this page that counts the number of frames rendered and prints the FPS onto the canvas, we can see that it tops out at 100fps, which seems suspicious at the least. Why is this? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Canvas FPS artificial limiting</title> </head> <body> <canvas id="c" width="320...
I am using it this way .. var canvas = document.getElementById("canvas"); var contextGrayLine= canvas.getContext("2d"); var contextRedLine= canvas.getContext("2d"); contextGrayLine.lineWidth = 50; contextRedLine.lineWidth = 20; contextGrayLine.beginPath(); contextGrayLine.moveTo(10,10); contextGrayLine.lineTo(500,10) ...
I'm making a game in html5 canvas. I'm using jquery so I can get the click event and the clicks x,y coordinates. I have an array of unit objects and a tiled terrain (also an array). The unit objects have bounding box information, their position, and their type. What is the most effecient way to map this click event to one of the unit...
I am loading a bitmap from a resource like so: Bitmap mBackground = BitmapFactory.decodeResource(res,R.drawable.image); What I want to do is make some changes to the bitmap before It gets drawn to the main canvas in my draw method (As it would seem wasteful to repeat lots of drawing in my main loop when it isn't going to change). I a...