画像を正しく表示するためにcontext.rotateを取得できません

Question

画像を180度回転する必要がありますが、回転コードを追加すると画像は正方形になります。

：回転なし

var moulding_matte_canvas_height = [], 
    canvas = document.createElement('canvas'), 
    ctx = canvas.getContext("2d"), 
    width = 5.171363636363637, 
    opening_i = 0, 
    rotate = 180 * Math.PI/180, 
    i = 2; 

moulding_matte_canvas_height[0] = 225; 
canvas.width = 285; 
canvas.height = 335; 
img = new Image(); 
img.src = 'http://www.asa.tframes.org:1881/system/components/compimg/80ac89fad42cf14561b641df241bf406/pattern'; 

function moulding_get_segment_width(img_width, opening_i) 
{ 
    return 175; 
} 

// 
$(img).on("load", function() { 
ctx.save(); 
ctx.translate(width, moulding_matte_canvas_height[opening_i]); 
//ctx.rotate(rotate); 
//ctx.rotate(Math.PI); 
ctx.drawImage(img, 0, 0, moulding_get_segment_width(img.width, i), width); 
ctx.restore(); 

// 
}); 
$("#mattes").append(canvas); /*appending the canvas*/ 

http://fiddle.jshell.net/onpa628e/1/

（空白が原因画像の赤色次描かされ、他の要素に意図的であるだけで明確にするためである）

回転あり：

予想：

Answer 1

それが唯一のキャンバス上の小さな部分を示しているためあなたのイメージは、正方形のように見えます。これは、translateがx軸上で〜5px（ "width"変数）だけ動いているために発生します。

Here's your example modified高いx値を持つ。