WalaWala / OwnGap

A drop in replacement for HTML5 canvas and audio on Android.
Other
57 stars 1 forks source link

scaling #1

Open antag0n1st opened 10 years ago

antag0n1st commented 10 years ago

how to scale the canvas ? how to scale sprites ?

WalaWala commented 10 years ago

Theoretically it's possible to set the resolution via

var canvas = document.createElement("canvas");
canvas.width = 1280;
canvas.height = 720;

But I think there is some bug with that (try it for yourself) - so the resolution is currently set to 720. Any scaling is done in your script, you can scale the images as you would with a normal canvas image:

var context = canvas.getContext("2d");
var image = new Image();
var scaleX = 100;
var scaleY = 200;
image.onload = function () {
  setInterval(function () {
    context.drawImage(image, 400, 300, scaleX, scaleY);
  }, 1000/60);
};
image.src = "media/starship.png";

(taken from OwnGap/assets/test.js - there is an example in there on how to start)

antag0n1st commented 10 years ago

I figure out the scaling of an image.

this method:

context.drawImage(img,x,y,width,height);

is not properly implemented , instead of stretching the image to the specified width and height , it crops the image.

but , the other implementation of the same method is good.

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

using that one , solves the problem.

antag0n1st commented 10 years ago

and just to confirm that the scaling of the canvas works fine:

var canvas = document.createElement("canvas"); canvas.width = 1280; canvas.height = 720;