I'm working on a game where you choose a fish and the you choose a size for the fish and draw it on to the canvas using your cursor, to summarize it. The only problem I'm having at the moment is the size, I just can't seem to figure out how to set different sizes for the fish, Iv'e tried changing the width but because I have many bezier curves, lines in the object, most of the shape doesn't actually have a set width or height. Any help appreciated. Thanks
An Example of one of my fish.
function funkyFish(params){
this.ctx = (typeof params.ctx !== "undefined") ? params.ctx : null;
this.x = (typeof params.x !== "undefined") ? params.x : 0;
this.y = (typeof params.y !== "undefined") ? params.y : 0;
this.width = (typeof params.width !== "undefined") ? params.width : 100;
this.height = (typeof params.height !== "undefined") ? params.height : 50;
this.strokeColour = (typeof params.strokeColour !== "undefined") ? params.strokeColour : "red";
this.strokeWidth = (typeof params.strokeWidth !== "undefined") ? params.strokeWidth : 3;
this.fillColour = (typeof params.fillColour !== "undefined") ? params.fillColour : "green";
this.draw = function(){
if(this.ctx){
var size = this.height / 1.5;
this.ctx.strokeStyle = this.strokeColour;
this.ctx.lineWidth = this.strokeWidth;
this.ctx.fillStyle = this.fillColour;
//Back Fin Things//
this.ctx.beginPath();
this.ctx.arc(this.x - 40,this.y - 13,size / 2.5,0,Math.PI * 2);
this.ctx.arc(this.x - 40,this.y + 13,size / 2.5,0,Math.PI * 2);
this.ctx.fill();
this.ctx.stroke();
//Fins//
this.ctx.beginPath();
this.ctx.moveTo(this.x + 32,this.y - 10)
this.ctx.bezierCurveTo(this.x - 20,this.y - 60,this.x-10,this.y - 50, this.x - 28,this.y - 30);
this.ctx.moveTo(this.x + 32,this.y + 10);
this.ctx.bezierCurveTo(this.x - 20,this.y + 60,this.x - 10,this.y + 50, this.x - 28,this.y + 30);
this.ctx.fill();
this.ctx.stroke();
//Main Body//
this.ctx.beginPath();
this.ctx.arc(this.x, this.y,size,0, Math.PI * 2);
this.ctx.fill();
this.ctx.stroke();
//Mouth//
this.ctx.moveTo(this.x + 16,this.y + 6);
this.ctx.arc(this.x + 4,this.y + 10,12,0,Math.PI,false);
this.ctx.stroke();
//Left Eye//
this.ctx.beginPath();
this.ctx.arc(this.x - 15,this.y - 10,size / 4.5,0,Math.PI * 2);
this.ctx.stroke();
//Right Eye//
this.ctx.beginPath();
this.ctx.arc(this.x + 13,this.y - 10,size / 4.5,0,Math.PI * 2);
this.ctx.stroke();
}
}
}
What Iv'e tried so far
if(fishSize.selectedIndex == 0){
ctx.scale(0.7,0.7);
} else if(fishSize.selectedIndex == 1){
ctx.scale(1,1);
} else{
ctx.scale(1.4,1.4);
}