Search Results

Search found 3347 results on 134 pages for 'html5 canvas'.

Page 2/134 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

• canvas tile grid, hover effects, single tilesheet, etc

  - by user121730

  I'm currently in the process of building both the client and server side of an html5, canvas, and WebSocket game. This is what I have thus far for the client: http://jsfiddle.net/dDmTf/7/ Current obstacles The hover effect has no idea what to put back after the mouse leaves. Currently it's just drawing a "void" tile, but I can't figure out how to redraw a single tile without redrawing the whole map. How would I go about storing multiple layers within the map variable? I was considering just using a multi-dimensional array for each layer (similar to what you see as the current array), and just iterating through it, but is that really an efficient way of doing it? Side note The tile sheet being used for the jsfiddle display is only for development. I'll be replacing it as things progress in the engine. I hope you can help! Hopefully you guys can help me, I've been struggling to get through things, since I'm learning how things kind of stuff works as I go. If you guys have any pointers for my JavaScript, feel free. As I'm more or less learning advanced usage as I go, I'm sure I'm doing plenty of things wrong. Note: I will continue to update this post as the engine improves, but updating the jsfiddle link and updating the obstacles list by striking things that have been solved, or adding additions. Thanks!

  Read the article

• Animating sprites in HTML5 canvas

  - by fnx

  I'm creating a 2D platformer game with HTML5 canvas and javascript. I'm having a bit of a struggle with animations. Currently I animate by getting preloaded images from an array, and the code is really simple, in player.update() I call a function that does this: var animLength = this.animations[id].length; this.counter++; this.counter %= 3; if (this.counter == 2) this.spriteCounter++; this.spriteCounter %= animLength; return this.animations[id][this.spriteCounter]; There are a couple of problems with this one: When the player does 2 actions that require animating at the same time, animation speed doubles. Apparently this.counter++ is working twice at the same time. I imagine that if I start animating multiple sprites with this, the animation speed will multiply by the amount of sprites. Other issue is that I couldn't make the animation run only once instead of looping while key is held down. Someone told me that I should create a function Animation(animation id, isLooped boolean) and the use something like player.sprite = new Animation("explode", false) but I don't know how to make it work. Yes I'm a noob... :)

  Read the article

• Making a startscreen for an HTML5 game?

  - by hustlerinc

  How would I make a start screen for a game using HTML5 canvas? I'm not looking for something advanced, just the new game button and highscore link etc. The question might be stupid, but I've never done anything similar, and the tutorials out there don't cover the subject. Is it enough to just make a fillText with an onclick function? Is there a way to find out the size of the text? Help appreciated.

  Read the article

• Advice on how to build html5 basic tile game (multi player, cross device)

  - by Eric

  I just read http://buildnewgames.com/real-time-multiplayer/ which explains the fundamentals and bets practices to build a massive real time multiplayer html5 game. My question is however given the “simplicity” of the game I need to build (simple kind of scratch game where you find or not something behind a tile), do I really need complex tools (canvas or node.js for example) ? The game The gamestakes place with a picture of our office as a background (tilemap). For HR purpose, we wish to create the following game fore employees: each day they can come to the website and click on a certain number of tiles (3 max per day) and find behind it motivation advice and interesting facts about the company. The constraints and rules the screen is divided into isometric 2D square tiles. There are basically an image (photograph of our office) number of tiles on the screen game: about 10,000 to much more (with scroll , see below) the players can scroll in 4 directions there are only 2 types of tiles: already open and closed player can open tiles that have not been yet open by other players there is no path for players : any player can click on any tile on the screen at any moment (if it’s not already done by another player) 2 players can’t be on the same tile at the same moment (or if they can, I’ll have to manage to see which one clicked on it first) only one type of player (all with similar roles), no weapon, no internal score… very simple game. no complex physics (collision only occurs if 2 players are on the same tile) The target I need to achieve: cross device, cross browsers high performance reaction (subsecond reactions) average nb of players per hour: up to 10K players per hour (quite high indeed but it’s because we aim at proving our case for the game to our business unit) So what I would like to know: 2D Tiled map: Do I need tiledmapeditor or can I enable me split the screen like here ? should I use canvas or plain html/css could be sufficient for my need? do I need a game engine/framework such as melon.js or crafty./js ? (even if the game play is extremely basic, I do need mouse and touché device support, mouse emulations on touch devices…) or ca I easily/quickly do it without? for my constraints and targets, should I use CPU acceleration ? for my constraints and targets, should I use web workers ? for the database, for a massively real time game should I avoid to put the current locations of player in MySQL as i feel it might slow me down. What kind of DB should I implement ? Thanks for your help !

  Read the article

• HTML5 Canvas A* Star Path finding

  - by Veyha

  I am trying to learn A* Star Path finding. Library I am using this - https://github.com/qiao/PathFinding.js But I am don't understand one thing how to do. I am need find path from player.x/player.y (player.x and player.y is both 0) to 10/10 This code return array of where I am need to move - var path = finder.findPath(player.x, player.y, 10, 10, grid); I am get array where I am need to move, but how to apply this array to my player.x and player.y? Array structure like - 0: 0 1: 0 length: 2, 0: 1 1: 0 length: 2, ... I am very sorry for my bad English language. Thanks.

  Read the article

• HTML5/JS - Choppy Game Loop

  - by Rikonator

  I have been experimenting with HTML5/JS, trying to create a simple game when I hit a wall. My choice of game loop is too choppy to be actually of any use in a game. I'm trying for a fixed time step loop, rendering only when required. I simply use a requestAnimationFrame to run Game.update which finds the elapsed time since the last update, and calls State.update to update and render the current state. State.prototype.update = function(ms) { this.ticks += ms; var updates = 0; while(this.ticks >= State.DELTA_TIME && updates < State.MAX_UPDATES) { this.updateState(); this.updateFrameTicks += State.DELTA_TIME; this.updateFrames++; if(this.updateFrameTicks >= 1000) { this.ups = this.updateFrames; this.updateFrames = 0; this.updateFrameTicks -= 1000; } this.ticks -= State.DELTA_TIME; updates++; } if(updates > 0) { this.renderFrameTicks += updates*State.DELTA_TIME; this.renderFrames++; if(this.renderFrameTicks >= 1000) { this.rps = this.renderFrames; this.renderFrames = 0; this.renderFrameTicks -= 1000; } this.renderState(updates*State.DELTA_TIME); } }; But this strategy does not work very well. This is the result: http://jsbin.com/ukosuc/1 (Edit). As it is apparent, the 'game' has fits of lag, and when you tab out for a long period and come back, the 'game' behaves unexpectedly - updates faster than intended. This is either a problem due to something about game loops that I don't quite understand yet, or a problem due to implementation which I can't pinpoint. I haven't been able to solve this problem despite attempting several variations using setTimeout and requestAnimationFrame. (One such example is http://jsbin.com/eyarod/1/edit). Some help and insight would really be appreciated!

  Read the article

• Issues with shooting in a HTML5 platformer game

  - by fnx

  I'm coding a 2D sidescroller using only JavaScript and HTML5 canvas, and in my game I have two problems with shooting: 1) Player shoots continous stream of bullets. I want that player can shoot only a single bullet even though the shoot-button is being held down. 2) Also, I get an error "Uncaught TypeError: Cannot call method 'draw' of undefined" when all the bullets are removed. My shooting code goes like this: When player shoots, I do game.bullets.push(new Bullet(this, this.scale)); and after that: function Bullet(source, dir) { this.id = "bullet"; this.width = 10; this.height = 3; this.dir = dir; if (this.dir == 1) { this.x = source.x + source.width - 5; this.y = source.y + 16; } if (this.dir == -1) { this.x = source.x; this.y = source.y + 16; } } Bullet.prototype.update = function() { if (this.dir == 1) this.x += 8; if (this.dir == -1) this.x -= 8; for (var i in game.enemies) { checkCollisions(this, game.enemies[i]); } // Check if bullet leaves the viewport if (this.x < game.viewX * 32 || this.x > (game.viewX + game.tilesX) * 32) { removeFromList(game.bullets, this); } } Bullet.prototype.draw = function() { // bullet flipping uses orientation of the player var posX = game.player.scale == 1 ? this.x : (this.x + this.width) * -1; game.ctx.scale(game.player.scale, 1); game.ctx.drawImage(gameData.getGfx("bullet"), posX, this.y); } I handle removing with this function: function removeFromList(list, object) { for (i in list) { if (object == list[i]) { list.splice(i, 1); break; } } } And finally, in the main game loop I have this: for (var i in game.bullets) { game.bullets[i].update(); game.bullets[i].draw(); } I have tried adding if (game.bullets.length > 0) to the main game loop before the above draw&update calls, but I still get the same error.

  Read the article

• HTML 5 Canvas - Dynamically include multiple images in canvas

  - by Ron

  I need to include multiple images in a canvas. I want to load them dynamically via a for-loop. I tried a lot but in the best case only the last image is displayed. I check this tread but I still get only the last image. For explanation, here's my latest code(basically the one from the other post): for (var i = 0; i <= max; i++) { thisWidth = 250; thisHeight = 0; imgSrc = "photo_"+i+".jpg"; letterImg = new Image(); letterImg.onload = function() { context.drawImage(letterImg,thisWidth*i,thisHeight); } letterImg.src = imgSrc; } Any ideas?

  Read the article

• HTML5 platformer collision detection problem

  - by fnx

  I'm working on a 2D platformer game, and I'm having a lot of trouble with collision detection. I've looked trough some tutorials, questions asked here and Stackoverflow, but I guess I'm just too dumb to understand what's wrong with my code. I've wanted to make simple bounding box style collisions and ability to determine on which side of the box the collision happens, but no matter what I do, I always get some weird glitches, like the player gets stuck on the wall or the jumping is jittery. You can test the game here: Platform engine test. Arrow keys move and z = run, x = jump, c = shoot. Try to jump into the first pit and slide on the wall. Here's the collision detection code: function checkCollisions(a, b) { if ((a.x > b.x + b.width) || (a.x + a.width < b.x) || (a.y > b.y + b.height) || (a.y + a.height < b.y)) { return false; } else { handleCollisions(a, b); return true; } } function handleCollisions(a, b) { var a_top = a.y, a_bottom = a.y + a.height, a_left = a.x, a_right = a.x + a.width, b_top = b.y, b_bottom = b.y + b.height, b_left = b.x, b_right = b.x + b.width; if (a_bottom + a.vy > b_top && distanceBetween(a_bottom, b_top) + a.vy < distanceBetween(a_bottom, b_bottom)) { a.topCollision = true; a.y = b.y - a.height + 2; a.vy = 0; a.canJump = true; } else if (a_top + a.vy < b_bottom && distanceBetween(a_top, b_bottom) + a.vy < distanceBetween(a_top, b_top)) { a.bottomCollision = true; a.y = b.y + b.height; a.vy = 0; } else if (a_right + a.vx > b_left && distanceBetween(a_right, b_left) < distanceBetween(a_right, b_right)) { a.rightCollision = true; a.x = b.x - a.width - 3; //a.vx = 0; } else if (a_left + a.vx < b_right && distanceBetween(a_left, b_right) < distanceBetween(a_left, b_left)) { a.leftCollision = true; a.x = b.x + b.width + 3; //a.vx = 0; } } function distanceBetween(a, b) { return Math.abs(b-a); }

  Read the article

• Are there any good javascript libraries for programming with html5 canvas element? [closed]

  - by marko

  I think there are some js-libraries with programming the html5 canvas element. Which one to choose? I've done some js-coding with canvas and are somewhat familiar with the api. But I think somekind of library which encapsulates the somewhat tedious canvas api would be a good thing, so it speeds up the development. Easeljs http://www.createjs.com/#!/EaselJS/download and Paper.js - http://paperjs.org/about/ Anybody who has any experience with any js-libraries for canvas? And any recommendations?

  Read the article

• The Challenge with HTML5 – In Pictures

  - by dwahlin

  I love working with Web technologies and am looking forward to the new functionality that HTML5 will ultimately bring to the table (some of which can be used today). Having been through the div versus layer battle back in the IE4 and Netscape 4 days I think we’re headed down that road again as a result of browsers implementing features differently. I’ve been spending a lot of time researching and playing around with HTML5 samples and features (mainly because we’re already seeing demand for training on HTML5) and there’s a lot of great stuff there that will truly revolutionize web applications as we know them. However, browsers just aren’t there yet and many people outside of the development world don’t really feel a need to upgrade their browser if it’s working reasonably well (Mom and Dad come to mind) so it’s going to be awhile. There’s a nice test site at http://www.HTML5Test.com that runs through different HTML5 features and scores how well they’re supported. They don’t test for everything and are very clear about that on the site: “The HTML5 test score is only an indication of how well your browser supports the upcoming HTML5 standard and related specifications. It does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform. The score is calculated by testing for the many new features of HTML5. Each feature is worth one or more points. Apart from the main HTML5 specification and other specifications created the W3C HTML Working Group, this test also awards points for supporting related drafts and specifications. Some of these specifications were initially part of HTML5, but are now further developed by other W3C working groups. WebGL is also part of this test despite not being developed by the W3C, because it extends the HTML5 canvas element with a 3d context. The test also awards bonus points for supporting audio and video codecs and supporting SVG or MathML embedding in a plain HTML document. These test do not count towards the total score because HTML5 does not specify any required audio or video codec. Also SVG and MathML are not required by HTML5, the specification only specifies rules for how such content should be embedded inside a plain HTML file. Please be aware that the specifications that are being tested are still in development and could change before receiving an official status. In the future new tests will be added for the pieces of the specification that are currently still missing. The maximum number of points that can be scored is 300 at this moment, but this is a moving goalpost.” It looks like their tests haven’t been updated since June, but the numbers are pretty scary as a developer because it means I’m going to have to do a lot of browser sniffing before assuming a particular feature is available to use. Not that much different from what we do today as far as browser sniffing you say? I’d have to disagree since HTML5 takes it to a whole new level. In today’s world we have script libraries such as jQuery (my personal favorite), Prototype, script.aculo.us, YUI Library, MooTools, etc. that handle the heavy lifting for us. Until those libraries handle all of the key HTML5 features available it’s going to be a challenge. Certain features such as Canvas are supported fairly well across most of the major browsers while other features such as audio and video are hit or miss depending upon what codec you want to use. Run the tests yourself to see what passes and what fails for different browsers. You can also view the HTML5 Test Suite Conformance Results at http://test.w3.org/html/tests/reporting/report.htm (a work in progress). The table below lists the scores that the HTML5Test site returned for different browsers I have installed on my desktop PC and laptop. A specific list of tests run and features supported are given when you go to the site. Note that I went ahead and tested the IE9 beta and it didn’t do nearly as good as I expected it would, but it’s not officially out yet so I expect that number will change a lot. Am I opposed to HTML5 as a result of these tests? Of course not - I’m actually really excited about what it offers.  However, I’m trying to be realistic and feel it'll definitely add a new level of headache to the Web application development process having been through something like this many years ago. On the flipside, developers that are able to target a specific browser (typically Intranet apps) or master the cross-browser issues are going to release some pretty sweet applications. Check out http://html5gallery.com/ for a look at some of the more cutting-edge sites out there that use HTML5. Also check out the http://www.beautyoftheweb.com site that Microsoft put together to showcase IE9. Chrome 8 Safari 5 for Windows     Opera 10 Firefox 3.6     Internet Explorer 9 Beta (Note that it’s still beta) Internet Explorer 8

  Read the article

• Implementing zoom on a fixed point, javascript/canvas

  - by csiz

  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 - 1 ) / canvas.scale); canvas.context.scale(scala,scala); canvas.scale *= scala; //canvas.scale is my variable that is initially set to 1. //canvas.mouse is my variable that represents the mouse position relative to the canvas

  Read the article

• A Few of My Favorite HTML5 and CSS3 Online Tools

  - by dwahlin

  I really enjoy coding up HTML5, CSS3, and JavaScript applications but there are some things that I’m better off writing with the help of a development tool. For example, CSS3 gradients aren’t exactly the most fun thing to write by hand and the same could be said for animations, transforms, or styles that require various vendor extensions. There are a lot of online tools that can simplify building HTML5/CSS3 sites and increase productivity in the process so I thought I’d put together a post on a few of my favorites tools. HTML5 Boilerplate HTML5 Boilerplate provides a great way to get started building HTML5 sites. It includes many best practices out of the box and even includes a few tricks that many people don’t even know about. The custom download option allows you to pick the features that you want to include in the files that’s generated. You can read more about it here.   Initializr Although HTML5 Boilerplate provides a great foundation for starting HTML5 sites, it focuses on providing a starting shell structure (namely an html page, JavaScript files, and a CSS stylesheet) and doesn’t include much in the way of page content to get started with. Initializer builds on HTML5 Boilerplate and provides an initial test page that can be tweaked to meet your needs. It also provides several different customization options to include/exclude features. CSS3 Maker CSS3 provides a lot of great features ranging from gradient support to rounded corners. Although many of the features are fairly straightforward there are some that are pretty involved such as gradients, animations, and really any styles that require custom vendor extensions to use across browsers. Sure, you can type everything by hand, but sites such as CSS3 Maker provide a visual way to generate CSS3 styles. CSS3, Please! CSS3, Please! is a code generation tool that can be used to generate cross-browser CSS3 styles quickly and easily. All of the main things you can do with CSS3 are available including a clever way to visually generate CSS3 transform styles.       Ultimate CSS Gradient Generator CSS3 Maker (above) has a gradient generator built-in but my favorite tool for creating CSS3 gradients is the Ultimate CSS Gradient Generator. If you’ve created gradients in tools like Photoshop then you’ll love what this tool has to offer especially since it makes it extremely straightforward to work with different gradient stops. @font-face Fonts Although @font-face has been available for awhile, I think fonts are cool and wanted to mention a site that provides a lot of font choices. When used correctly fonts can really enhance a page and when used incorrectly (think Comic Sans) they can absolutely ruin a page. Several sites exist that provide fonts that can be used with @font-face definitions in CSS style sheets. One of my favorites is Font Squirrel.   HTML5 & CSS3 Support and Tests Interested in knowing what HTML5 and CSS3 features a given browser supports? Want to know how various browsers stack up with each other as far as HTML5/CSS3 support. Look no further than the HTML5 & CSS3 Support page or the HTML5 Test page.   CSS3 Easing Animation Tool CSS3 animations aren’t widely supported across browsers right now (I’m not really using them at this point) but they do offer a lot of promise. Creating easings for animations can definitely be a challenge but they’re something that are critical for adding that “professional touch” to your animations. Fortunately you can use the Ceaser CSS Easing Animation Tool to simplify the process and handle animation easing with…...ease.   There are several other online tools that I like but these are some of the ones I find myself using the most. If you have any favorite online tools that simplify working with HTML5 or CSS3 let me know.     For more information about onsite or online training, mentoring and consulting solutions for HTML5, jQuery, .NET, SharePoint or Silverlight please visit http://www.thewahlingroup.com.

  Read the article

• Canvas scalable arc position

  - by Amay

  http://jsfiddle.net/cs5Sg/11/ I want to do the scalable canvas. I created two circles (arcs) and one line, when you click on circle and move it, the line will follow and change position. The problem is when I added code for resize: var canvas = document.getElementById('myCanvas'), context = canvas.getContext('2d'), radius = 12, p = null, point = { p1: { x:100, y:250 }, p2: { x:400, y:100 } }, moving = false; window.addEventListener("resize", OnResizeCalled, false); function OnResizeCalled() { var gameWidth = window.innerWidth; var gameHeight = window.innerHeight; var scaleToFitX = gameWidth / 800; var scaleToFitY = gameHeight / 480; var currentScreenRatio = gameWidth / gameHeight; var optimalRatio = Math.min(scaleToFitX, scaleToFitY); if (currentScreenRatio >= 1.77 && currentScreenRatio <= 1.79) { canvas.style.width = gameWidth + "px"; canvas.style.height = gameHeight + "px"; } else { canvas.style.width = 800 * optimalRatio + "px"; canvas.style.height = 480 * optimalRatio + "px"; } } function init() { return setInterval(draw, 10); } canvas.addEventListener('mousedown', function(e) { for (p in point) { var mouseX = e.clientX - 1, mouseY = e.clientY - 1, distance = Math.sqrt(Math.pow(mouseX - point[p].x, 2) + Math.pow(mouseY - point[p].y, 2)); if (distance <= radius) { moving = p; break; } } }); canvas.addEventListener('mouseup', function(e) { moving = false; }); canvas.addEventListener('mousemove', function(e) { if(moving) { point[moving].x = e.clientX - 1; point[moving].y = e.clientY - 1; } }); function draw() { context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.moveTo(point.p1.x,point.p1.y); context.lineTo(point.p2.x,point.p2.y); context.closePath(); context.fillStyle = '#8ED6FF'; context.fill(); context.stroke(); for (p in point) { context.beginPath(); context.arc(point[p].x,point[p].y,radius,0,2*Math.PI); context.fillStyle = 'red'; context.fill(); context.stroke(); } context.closePath(); } init(); The canvas is scalable, but the problem is with the points (circles). When you change the window size, they still have the same position on the canvas area, but the distance change (so the click option fails). How to fix that?

  Read the article

• (CanvsEngine) Collission problem ( TypeError: this._polygon[this._frame] is undefined) [on hold]

  - by user2127102

  How can i fix this error TypeError: this._polygon[this._frame] is undefined Heres my code: html: <!DOCTYPE Html> <head> <meta charset="utf-8"> <title>Project</title> <link href="css/style.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="js/canvasengine-1.3.0.all.min.js"></script> <script src="js/extends/Input.js"></script> <script src="main.js"></script> </head> <body> <canvas id="window"></canvas> </body> main.js: var canvas = CE.defines("window"). extend(Input). ready(function() { canvas.Scene.call("Game"); }); canvas.Scene.new({ name: "Game", materials: { images: { player: "img/character.png", Wall: "img/TestWall.png" } }, ready: function(stage) { var _canvas = this.getCanvas(); _canvas.setSize("browser", "strech"); this.Player = Class.new("Entity", [stage]); this.Player.el.drawImage("player"); stage.append(this.Player.el); this.Wall = Class.new("Entity", [stage]); this.Wall.el.drawImage("Wall"); this.Wall.position(300, 0); stage.append(this.Wall.el); }, render: function(stage) { //Controls ====== //Control calculations var self = this; this.Mover_A; this.Mover_D; this.Mover_W; this.Mover_S; canvas.Input.keyDown(Input.A, function(e) { self.Mover_A = true; }); canvas.Input.keyDown(Input.D, function(e) { self.Mover_D = true; }); canvas.Input.keyDown(Input.W, function(e) { self.Mover_W = true; }); canvas.Input.keyDown(Input.S, function(e) { self.Mover_S = true; console.log(self.Mover_S); }); canvas.Input.keyUp(Input.A, function(e) { self.Mover_A = false; }); canvas.Input.keyUp(Input.D, function(e) { self.Mover_D = false; }); canvas.Input.keyUp(Input.W, function(e) { self.Mover_W = false; }); canvas.Input.keyUp(Input.S, function(e) { self.Mover_S = false; }); x = 0; y = 0; if(this.Mover_A)x -= 1.5; //A if(this.Mover_D)x += 1.5;//D if(this.Mover_W)y -= 1.5;//W if(this.Mover_S)y += 1.5; //S this.Player.move(x, y); this.Player.hit("over", [this.Wall], function(state, el) { this.Player.move(x * -1, y * -1); }); //End Controls ===== stage.refresh(); } });

  Read the article

• Slow Firefox Javascript Canvas Performance?

  - by jujumbura

  As a followup from a previous post, I have been trying to track down some slowdown I am having when drawing a scene using Javascript and the canvas element. I decided to narrow down my focus to a REALLY barebones animation that only clears the canvas and draws a single image, once per-frame. This of course runs silky smooth in Chrome, but it still stutters in Firefox. I added a simple FPS calculator, and indeed it appears that my page is typically getting an FPS in the 50's when running Firefox. This doesn't seem right to me, I must be doing something wrong here. Can anybody see anything I might be doing that is causing this drop in FPS? <!DOCTYPE HTML> <html> <head> </head> <body bgcolor=silver> <canvas id="myCanvas" width="600" height="400"></canvas> <img id="myHexagon" src="Images/Hexagon.png" style="display: none;"> <script> window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var animX = 0; var frameCounter = 0; var fps = 0; var time = new Date(); function animate() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.clearRect(0, 0, canvas.width, canvas.height); animX += 1; if (animX == canvas.width) { animX = 0; } var image = document.getElementById("myHexagon"); context.drawImage(image, animX, 128); context.lineWidth=1; context.fillStyle="#000000"; context.lineStyle="#ffffff"; context.font="18px sans-serif"; context.fillText("fps: " + fps, 20, 20); ++frameCounter; var currentTime = new Date(); var elapsedTimeMS = currentTime - time; if (elapsedTimeMS >= 1000) { fps = frameCounter; frameCounter = 0; time = currentTime; } // request new frame requestAnimFrame(function() { animate(); }); } window.onload = function() { animate(); }; </script> </body> </html>

  Read the article

• Anti-aliased text on HTML5's canvas element

  - by Matt Mazur

  I'm a bit confused with the way the canvas element anti-aliases text and am hoping you all can help. In the following screenshot the top "Quick Brown Fox" is an H1 element and the bottom one is a canvas element with text rendered on it. On the bottom you can see both "F"s placed side by side and zoomed in. Notice how the H1 element blends better with the background: http://jmockups.s3.amazonaws.com/canvas_rendering_both.png Here's the code I'm using to render the canvas text: var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.fillStyle = 'black'; ctx.font = '26px Arial'; ctx.fillText('Quick Brown Fox', 0, 26); } Is it possible to render the text on the canvas in a way so that it looks identical to the H1 element? And why are they different?

  Read the article

• Drawning with canvas - problem with sizing [closed]

  - by pioncz

  For example i made 2 canvas with size 500px x 500px and 100px x 100px to see how fillrect works and i found that canvas.fillrect doesnt takes px for arguments, and my question is: how to make pixels as arguments or how to count these arguments for pixels? This is example: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function draw() { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = '#00f'; ctx.fillRect (0, 0,100, 100); var canvas2 = document.getElementById('myCanvas2'); var ctx2 = canvas2.getContext('2d'); ctx2.fillStyle = '#0f0'; ctx2.fillRect (0, 0, 100, 100); } </script> </head> <body onLoad="draw();"> <canvas id="myCanvas" style="background:black;width:500px;height:500px;display:block;position:absolute;top:0px;left:0px;"> </canvas> <canvas id="myCanvas2" style="background:purple;width:100px;height:100px;display:block;position:absolute;top:0px;left:0px;"> </canvas> </body> </html>

  Read the article

• How To Scale Canvas In Android

  - by Daniel Braithwaite

  I am writing a android game using Canvas as the way to draw everything, the problem is that when i run it on different android phones the canvas dosn't change size i tried using canvas.scale() but that didn't make a i difference. The code i use for drawing is ... public void draw( Canvas c, int score ) { Obstical2[] obstmp = Queue.toArray(this.o); Coin[] cointmp = QueueC.toArray(this.c); for( int i = 0; i < obstmp.length; i++ ) { obstmp[i].draw(c); } for( int i = 0; i < cointmp.length; i++ ) { cointmp[i].draw(c); } c.drawText(String.format("%d", score ), 20, 50, textPaint); if( isWon && isStarted ) c.drawText("YOU WON", 20, 400, resPaint); else if( isLost && isStarted ) c.drawText("YOU LOST", 20, 400, resPaint); } The function above calls the draw functions for the entity's on the screen, theses function are as follows Draw Function For Obstical : public void draw( Canvas c ) { Log.i("D", "COIN"); coin.draw(c); } Draw Function For Coin : public void draw( Canvas c ) { obstical.draw(c); } How could i make the canvas re-size to it would look the same on any screen ? Cheers Daniel

  Read the article

• Rotate canvas along its center based on user touch - Android

  - by Ganapathy

  I want to rotate the canvas circularly on its center axis based on user touch. i want to rotate based on center but its rotating based on top left corner . so i am able to see only 1/4 for rotation of image. any idea.. Like a old phone dialer . I have tried like as follows onDraw(Canvas canvas){ canvas.save(); // do my rotation canvas.rotate(rotation,0,0); canvas.drawBitmap( ((BitmapDrawable)d).getBitmap(),0,0,p ); canvas.restore(); } @Override public boolean onTouchEvent(MotionEvent e) { float x = e.getX(); float y = e.getY(); updateRotation(x,y); mPreviousX = x; mPreviousY = y; invalidate(); } private void updateRotation(float x, float y) { double r = Math.atan2(x - centerX, centerY - y); rotation = (int) Math.toDegrees(r); }

  Read the article

• Javascript Canvas Drawing Efficiency

  - by jujumbura

  I have just recently started some experiments with game development in Javascript/HTML5, and so far it has been going pretty well. I have a simple test scene running with some basic input handling, and a hundred-ish drawImage() calls with a few transforms. This all runs great on Chrome, but unfortunately, it already chugs on Firefox. I am using a very large canvas ( 1920 x 1080 ), but it doesn't seem like I should be hitting my limit already. So on that note, I was hoping to ask a few questions: 1) What exactly is done on the CPU vs. the GPU in terms of canvas and drawImage()? I'm afraid the answer is probably "it depends on the browser", but can anybody give me some rules of thumb? I naively imagined that each drawImage call results in a textured quad on the GPU with the canvas effectively being a render target, but I'm wondering if I'm pretty far off base there... 2) I have seen posts here and there with people saying not to use the translate(), rotate(), scale() functions when drawing on the canvas. Am I adding a lot of overhead just by adding a translate() call, as opposed to passing in the x,y to drawImage()? Some people suggest using "transate3d", etc., which are CSS properties, but I'm not sure how to use them within a scene. Can they be used for animated sprites within a single canvas? 3) I have also seen a lot of posts with people mentioning that pre-building canvases and then re-using them is a lot faster than issuing all the individual draw calls again. I am guessing that my background should definitely be pre-built into a canvas, but how far should I take this? Should I maintain an individual canvas for each sprite, to cache all static image data when not animating? Thank you much for your advice!

  Read the article

• Inconsistent canvas drawing in Android browser

  - by user2943466

  In putting together a small canvas app I've stumbled across a weird behavior that only seems to occur in the default browser in Android. When drawing to a canvas that has the globalCompositeOperation set to 'destination-out' to act as the 'eraser' tool, Android browser sometimes acts as expected, sometimes does not update the pixels in the canvas at all. the setup: context.clearRect(0,0, canvas.width, canvas.height); context.drawImage(img, 0, 0, canvas.width, canvas.height); context.globalCompositeOperation = 'destination-out'; draw a circle to erase pixels from the canvas: context.fillStyle = '#FFFFFF'; context.beginPath(); context.arc(x,y,25,0,TWO_PI,true); context.fill(); context.closePath(); a small demo to illustrate the issue can be seen here: http://gumbojuice.com/files/source-out/ and the javascript is here: http://gumbojuice.com/files/source-out/js/main.js this has been tested in multiple desktop and mobile browsers and behaves as expected. On Android native browser after refreshing the page sometimes it works, sometimes nothing happens. I've seen other hacks that move the canvas by a pixel in order to force a redraw but this is not an ideal solution.. Thanks all.

  Read the article

• What technique to use when trying to drag elements around on a canvas

  - by choise

  I want to achieve two things in my java swing application: First, i need a canvas zone where i can drag elements (a rectangle or a circle) from the outside of a pane inside the canvas and place it at the position where they where dropped. also it should be possible to select an element on the canvas and move it around and drop it on another location on the canvas. what techniques would fit best to do such a job? Please leave a comment if something is unclear.

  Read the article

• Bind event to shape on canvas

  - by Ben Shelock

  How can I bind an event to a shape drawn on a canvas? I presumed this would work but I get an error. <html> <head> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; var rec = ctx.fillRect (0, 0, 55, 50); rec.onclick = function(){ alert('something'); } } </script> </head> <body onLoad="draw()"> <canvas id="canvas" width="300" height="300"></canvas> </body> </html>

  Read the article

• How to Hide the code of HTML5 games [closed]

  - by jeyanthinath

  Possible Duplicate: HTML5 game obfuscation I am begin to develop games in HTML5 and I had doubt that , when we use the game in online its source can be visible to others even if we use complex code and reference to java-script files , then what is the use of HTML5 even everyone can be able to download the code and still use their updated version Is it possible to hide the code of HTML5 in web page games OR there some other way it can made it not visible to the users !!! If not what is the use of HTML5 as it is open to user as well !!!

  Read the article

< Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >