Home/ Questions/Q 8943377
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T11:45:13+00:00

I tried to create rectangle in canvas, i am bit confused with coordinate system

  • 0

I tried to create rectangle in canvas, i am bit confused with coordinate system of canvas

    <!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>

http://jsfiddle.net/bkf2e/

i am aware of canvas.rect function, but i need to create some different shape for me.
I created rectangle of size (90,90)(square), but it is creating full square.
enter image description here

I know it may be my simple mistake, but can you please help me on that.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    solved problem,

    it was silly mistake of width and height attribute

    <canvas id='ribbonid' width='90' height='90' > </canvas>
    • 0