CODEWITHSUNDEEP
htmlhtml5-canvas
Ashish Kasma
Ashish Kasma

Reputation: 3642

HTML5 canvas drawing coordinates system issue

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.

Upvotes: 0

Views: 1015

Answers (2)

Ashish Kasma
Ashish Kasma

Reputation: 3642

solved problem,

it was silly mistake of width and height attribute

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

Upvotes: 0

Damon Smith
Damon Smith

Reputation: 1790

you need to set the size of your canvas using the width and height attributes, if you use css to size it then it will scale the default size rather than becoming the size you want, which is why it was distorted like that.

I've updated your jsfiddle with the attributes set and you'll see that it's now square.

Upvotes: 3

Related Questions