さまざまな画面サイズでブラウザウィンドウの右端にHTMLキャンバスのfillRect（）を配置する方法

Question

基本的に、私は右から左へ移動するsqaureのアニメーションを持っています。私は自分の作品を提示するために使用する画面サイズを知っていないので、開始位置のx位置の開始値（例：sqrx = 1400）をハードコーディングすることはできません。開発すると、ブラウザのウィンドウがはるかに大きくなるため、アニメーションは画面の中央で開始されます。

TLDR：ブラウザウィンドウの大きさに関係なく、右から左に動くアニメーションの開始X位置をブラウザウィンドウの右端にスナップするように設定します。

var canvasWidth = c.width(); 
var canvasHeight= c.height(); 

//Vars to allow buttons to work for reset functionality 
var playAnimation= true; 
var startButton = $("#startAnimation"); 
var stopButton = $("#stopAnimation"); 
//Start position of Square 
var sqrx = 1310; 

//Animation timer 
function animate(){ 
    sqrx--; 
    ctx.clearRect(0,0,canvasWidth, canvasHeight); 
    ctx.fillRect(sqrx,700,40,50); 
    setTimeout(animate,33); 
//save state when the cavnas is first drawn. 
    ctx.save(); 
}; 
animate(); 

Answer 1

キャンバスを与えることができれば、あなたがそれを使用するデバイスに関係なく、ウィンドウの画面サイズの値を取得しますように、それは、ウィンドウの幅と高さが非常に簡単になります：

var width = canvas.width = window.innerWidth; 
var height = canvas.height = window.innerHeight; 

そのサイズのための長方形の値を与える：

var rect_size = 50; 

これはそれを行いますキャンバスに矩形を配置するのが簡単です。

function draw(){ 
    ctx.beginPath(); 
    ctx.fillStyle = "red"; 
    ctx.fillRect(width - rect_size , 0 , rect_size , rect_size); 
    ctx.fill(); 
} 
draw();