Jump to content

[Solved] Js Canvas Displaying Everything Stretched?


MrFish

Recommended Posts

I guess canvases like inline width/height instead of css width/height. This solved the issue.I'm working on a project that uses HTML5 Canvas and I'm having a strange problem with stretching. I noticed it with images and thought my math might have been wrong but then I took everything out and tried drawing a simple 100x100 square and it's completely stretched out at different proportions. 100by100.jpg The code for this (small class code)-

function Canvas(DOMID, F){this.Frame =   null;this.width =  null;this.height =  null;this.zoom =   null;this.DOM =	null;this.ctx =   null;this.offset =  null; //Constructor this.init = function(DOMID, F){  this.DOM =   document.getElementById(DOMID);  this.width =  $(this.DOM).width();  this.height =  $(this.DOM).height();  this.ctx =  this.DOM.getContext("2d");  this.zoom =  1;  this.offset =  {x:0,y:0};  if(F != null)   this.setFrame(F);   this.onReady();} //Modifiers this.draw =   function(){  //this.ctx.drawImage(image, 0, 0);  this.ctx.beginPath();  this.ctx.fillStyle = "#ffffff";  this.ctx.rect(0,0,100,100);  this.ctx.closePath();  this.ctx.fill();}this.setFrame =  function(F){  this.Frame = F;}//Events this.onReady = function(){} this.init(DOMID, F);}

The code calling this function is in an interval-

window.goToCanvas = function(){  clearTimeout(playInterval);  playInterval = setInterval("drawCurrentCanvas()", window.playSpeed);}window.drawCurrentCanvas = function(){  index = window.canvasIndex;  canvases[index].draw();}

The page can be found here- http://micahwilliamson.com/analytics/viewer/viewer.php I'm stumped. I hope someone can see my mistake somewhere.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...