キャンバスに長方形を作成しようとしましたが、キャンバスの座標系と少し混乱しています
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Modal form</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
body{
background-color: #231F20;
}
#ribbonid{
width:90px;
height: 90px;
}
</style>
</head>
<body>
<canvas id='ribbonid' > </canvas>
<script>
$(document).ready(function(){
var $ribbonid = $('#ribbonid');
// get the canvas element using the DOM
var canvas = document.getElementById('ribbonid');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var cts = canvas.getContext('2d');
cts.fillStyle = '#f7911e';
cts.beginPath();
cts.moveTo(0, 0);
cts.lineTo(90, 0);
cts.lineTo(90, 90);
cts.lineTo(0, 90);
cts.lineTo(0, 0);
cts.fill();
cts.closePath();
}
});
</script>
</body>
</html>
canvas.rect 関数を認識していますが、別の形状を作成する必要があります。サイズ (90,90)(square) の長方形を作成しましたが、完全な正方形を作成しています。
私の単純なミスかもしれませんが、助けていただけませんか。