schmetterling,я и так это понял
и вообще уже знаю как поправить, просто показал если кто то будет писать арканоид и будет читать эту тему и мучатся)
вот так должен выглядить блок
<!DOCTYPE HTML>
<html>
<head> </head>
<body>
<canvas width="500" height="500"></canvas>
<script>
var canva = document.body.children[0];
var ctx = canva.getContext("2d");
var block = {
width:150,
height:30,
Draw: function (x, y) {
ctx.beginPath();
ctx.fillStyle = "green";
ctx.fillRect(x,y,this.width, this.height);
this.y = y;
this.x = x;
boundary();
}
};
block.Draw(150,100);
function boundary() {
var rad = 20;
ctx.beginPath();
ctx.moveTo(block.x,block.y - rad);
ctx.lineTo(block.x + block.width , block.y - rad);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(block.x+ block.width + rad,block.y);
ctx.lineTo(block.x+ block.width + rad , block.y + block.height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(block.x, block.y + block.height + rad);
ctx.lineTo(block.x + block.width , block.y + block.height + rad);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(block.x- rad,block.y);
ctx.lineTo(block.x - rad , block.y + block.height);
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(block.x,block.y);
ctx.arc(block.x,block.y, rad,(Math.PI / 180)* -90, (Math.PI / 180)* -180, true);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(block.x +block.width,block.y);
ctx.arc(block.x +block.width, block.y, rad,(Math.PI / 180)* -90, (Math.PI / 180)* 0, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(block.x + block.width, block.y + block.height);
ctx.arc(block.x + block.width, block.y + block.height, rad,(Math.PI / 180)* 0, (Math.PI / 180)* 90, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(block.x ,block.y + block.height);
ctx.arc(block.x ,block.y + block.height, rad,(Math.PI / 180)* 180, (Math.PI / 180)* 90, true);
ctx.fill();
}
</script>
</body>
</html>
но я так и не понял раз 15 перечитывал коммент
canvas и метод arc как правильно определить окружность ...