Rotating full window canvas - html

Question

I am doing simple (for now) application to draw on canvas.
I can draw simple shapes like putting dots, squares, lines, but when I try to rotate whole image - nothing happens. No errors, no rotation. Please advise where is problem.
Canvas is updated to window size by function onwindowresize:
function adaptSize() {
var canvas = document.getElementById('canvas');
// set size to window
canvas.setAttribute('width',window.innerWidth);
canvas.setAttribute('height',window.innerHeight);
var ctx = canvas.getContext("2d");
// set state size to window
ctx.width = window.innerWidth;
ctx.height = window.innerHeight;
drawSaved();
inform('Canvas re-drawed - window resized');
}
Each draw function saves itself inlocalstorage to re-draw, for example placing dot:
function placeDot(x,y){
if(document.getElementById('colors').hasAttribute('chosen')){ var color = document.getElementById('colors').getAttribute('chosen');}else{ var color = 'rgba(0,0,0,1)'; }
var canvas = document.getElementById("canvas");
if(canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.save();
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x-2,y-2,5,0,Math.PI*2,true);
ctx.fill();
ctx.restore();
}
save("//Dot("+x+","+y+",5,'"+color+"')");
return false;
}
than re-draw function:
function drawSaved(){
var picture = localStorage.getItem("picture");
var drawstate =document.getElementById('drawstate');
console.log('picture:'+picture+'.');
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
if((picture=="")||(picture==null)){
picture = ""
localStorage.setItem("picture", picture);
drawstate.innerHTML='picture empty';
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
console.log('cleared');
}else{
console.log(picture);
saved = picture.split('//');
for(var i=1;i<saved.length;i++){
eval(saved[i]);
}
drawstate.innerHTML='picture restored';
}
}
So, creating rotation:
function turn(angle){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.save();
console.log('saved');
ctx.rotate(angle);
console.log('rotated by'+angle);
ctx.restore();
console.log('restored');
save("//Turn('"+angle+"')");
return false;
}
All this gives no effect on rotation - or any other transformation. Drawing is OK.
Please help.
Thanks
Pifon
PS: this programme is: http://www.pifon.com/3d/ rotation should work on arrow right press.
Full script: http://www.pifon.com/3d/js/index.js

Answer 1

You have two functions named Turn(angle) in your original source.

Answer 2

Apparently it starts to work.
Corrected turn function.
function turn(angle){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.translate(canvas.width/2,canvas.height/2);
ctx.rotate(angle*(Math.PI/180));
ctx.translate(-canvas.width/2,-canvas.height/2);
inform('turn executed (by: '+angle+' degrees)');
drawSaved();
return false;
}
Thanks for your help.
Pifon