MrFish Posted November 21, 2011 Share Posted November 21, 2011 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. 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.