Jump to content

Problem with copying from one canvas to another


Recommended Posts

Hi all. Firstly, I want to apologize for my english, when I got more time I should spend this time for learning.


I make my first html5 game - simple race game on planet Mars. I have trouble with viewport on my mobile device. I created big race map with resolution 6000px x 3000px. Viewport has screen resolution, for example my laptop has full hd resolution so viewport has about full hd resolution. I created two canvases, one for big map and this canvas isn't connected to the DOM, he is like a buffer. Second canvas is a viewport for game and this viewport follows the player. I copy from big canvas to viewport data and this solution runs quite good on different browsers. But I have problem with BlackBerry Z10 viewport. Take a look of example screens:


Laptop piece of screen:



BlackBerry Z10 piece of screen:



Second screen has a problem with weird scaled width. Coordinates are good, same on two devices. I don't use scale property of canvas, but this is look like a bug on BlackBerry Z10.

Canvas viewport has in css styles: 100% width and 100% height, tag <body> too. Width and height of viewport is respectively: window.innerWidth, window.innerHeight. For problems with retina's display I use these code in <head> section:

var meta = document.createElement("meta");		meta.setAttribute('name','viewport');		meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');		document.getElementsByTagName('head')[0].appendChild(meta);

Code which I used in my game to draw one canvas from another:

intense.renderSystem('TrackRenderSystem', {		components: ['2D'],		manual: true,		priority: 1,		init: function () {			var img = intense.assetManager.get('track_color.png');			this.canvas = document.createElement('canvas');		    this.canvas.width = img.width;		    this.canvas.height = img.height;		    this.context = this.canvas.getContext('2d');		    //buffer canvas - big map		    this.context.drawImage(img, 0, 0, this.canvas.width, this.canvas.height);		},		update: function () {			this.drawTrack();		},		drawTrack: function () {			var ctx = intense.context, <--- context and canvas of viewport				canvas = intense.canvas;				        ctx.clearRect(0, 0, canvas.width, canvas.height);                // -------  drawing from viewport. MB.conf.vX and MB.conf.vY are shift from the left top corner.	        ctx.drawImage(this.canvas, MB.conf.vX, MB.conf.vY, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);		}	});

Well, I don't know what to do. In many browsers and many resolutions on my laptop this viewport looks good, but on Z10 looks weird. Coordinates are good, but game isn't looks good. Car looks good, no problem with drawing this part, but drawing piece of large canvas blow my mind.


Maybe Z10 has a bug. Has anyone encountered anything like this problem?  I know, there is a technique with map tiles, but i don't have a time for big changes in my game. 


Thx for help/discussion.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...