How to make a responsive character using HTML5 Canvas and JS

Question

I have created a character using HTML5 Canvas and Javascript, following this tutorial: http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/

Although, I am now struggling to make the character responsive, I have tried this:

function resize(){    
  $("#canvasDiv").outerHeight($(window).height()-$("#canvasDiv").offset().top- Math.abs($("#canvasDiv").outerHeight(true) - $("#canvasDiv").outerHeight()));
}

$(document).ready(function(){
  var myWidth = $(window).width()-$("#canvasDiv").offset().top- Math.abs($("#canvasDiv").outerWidth(true) - $("#canvasDiv").outerWidth());
  var myHeight = $(window).height()-$("#canvasDiv").offset().top- Math.abs($("#canvasDiv").outerHeight(true) - $("#canvasDiv").outerHeight());
  prepareCanvas(document.getElementById("canvasDiv"), myWidth, myHeight);
  $(window).on("resize", function(){     
  var newWidth = $(window).width()-$("#canvasDiv").offset().top- Math.abs($("#canvasDiv").outerWidth(true) - $("#canvasDiv").outerWidth());
  var newHeight = $(window).height()-$("#canvasDiv").offset().top- Math.abs($("#canvasDiv").outerHeight(true) - $("#canvasDiv").outerHeight());
  $( "#canvasDiv" ).empty();
  prepareCanvas(document.getElementById("canvasDiv"), newWidth, newHeight);
  });
});

But this just seems to cut the image instead of resizing it.

Here is a demo: https://jsfiddle.net/cjdygegh/

Answer 1

This is because you are just resizing the canvas, the images inside are staying the same size and therefore go outside the bounds of the canvas. You need to use the scale function to scale the scene on the canvas by the current width and height divided by the desired width and height:

context.scale(x, y); // Where x and y are ratios (1 being 100%).

Things to consider:

1. If you want the aspect ratio to be kept? If so you will need to use the minimum ratio of width or height.
2. If you want to scale up, above 100%.