CreateJs Canvas resize Bitmap

Question

I'm currently working with createJS canvas. I have an image with a predefined size into a Json file and boxes that are link to an eventListener on "mouseout" and "mouseover").

var stage = new createjs.Stage("testCanvas");
createjs.Touch.enable(stage);
stage.enableMouseOver(10);

Bitmap for the image:

var image = new Image();
image.onload = function () {
  var img = new createjs.Bitmap(event.target);
  stage.addChild(img);

then i draw my boxes (rectangles):

angular.forEach(..., function(value){
  var rectGreen = new createjs.Shape();
  rectGreen.graphics.beginFill("green")
    .drawRect(
       value.shapeDimension....,
       value.shapeDimension....,
       value.shapeDimension....,
       value.shapeDimension....
     );
     rectGreen.alpha = 0.01;
     stage.addChild(rectGreen);

my mouse events:

rectGreen.addEventListener("mouseover", function (event) {
  var target = event.target;
  target.alpha = 0.35;
  stage.update();
});

rectGreen.addEventListener("mouseout", function (event) {
  var target = event.target;
  target.alpha = 0.01;
  stage.update();
});

So, it's working but I have some difficulties with the canvas/image size.

If I don't set any width/heigth to the canvas Html, it results in a 300*150 canvas but the image is not resized so it displays only a slight piece of the real image.
If i set width and height in the canvas html, (real size is 1700*1133), the image appears only 842*561 and the canvas takes place).
I tried different solution with Setting DIV width and height in JavaScript

but nothing enabled me to set my image correctly, and responsive so that the size of my rectangles adpt to the screen size of the image.

score 0 · Accepted Answer · answered Nov 29 '16 at 14:03

0

In order to dynamically resize the Canvas to the exact size of the image, you can do this:

//to get a variable reference to the canvas
var canvas = document.getElementById("testCanvas");
//supposing the Bitmap is the variable named 'img'
canvas.width = img.image.width;
canvas.height = img.image.height;

If you have more elements on the screen and the total size is bigger than the image itself, you can add everything on the screen in a container, and then scale the container itself to fit the canvas perfectly, like this:

var container = new createjs.Container();
container.addChild(img, [your other rectangle elements here]);
stage.addChild(container);
//will downscale or upscale the container to fit the canvas
container.scaleX = container.scaleY = canvas.width / img.image.width;

answered Nov 29 '16 at 14:03

Catalin Iancu

722
5
18

Here is an approach to fit the contents inside the canvas: http://jsfiddle.net/lannymcnie/4yy08pax/ – Lanny Nov 29 '16 at 16:13
Yes, if we need to make the elements fit the window size perfectly and also center them, that will work best. – Catalin Iancu Nov 29 '16 at 16:20
Thank you for your help, about canvas size, it seems good, but I didn't look in detail to the container. This might be helpful so I'll take a look and accept it as an answer asap. – Antoine Nov 29 '16 at 17:11

CreateJs Canvas resize Bitmap

1 Answers1