how to display the image width,height and angle values in canvas after dropping the image

Question

Hey Everyone I am new to html5 canvas as I would like to know is there any possibility of getting the image height,width and angle values while resizing and rotating.The image which displays what i want. I want that process after dropping in to canvas as i searched Google for this couldn't find relevant answer almost everyone is showing the positions of image in canvas that is to kept in code but i want the image should should display its values automatically by click on dimensions button.Thanks in advance any help would be great.

The image should display its dimensions in canvas according to image like if image is changed(or re-sized or rotate automatically the dimensions should change using button click function).

yes @MJQ if we resize the image it automatically should display the image height,width — Cathy
– Cathy, Commented Mar 1, 2013 at 11:42
You have to keep track of image coordinates, i.e where is it being drawn and its width and height! If you have this you can display them! — MJQ
– MJQ, Commented Mar 1, 2013 at 11:44

Shalin Jirawla · Accepted Answer · 2013-03-01 11:21:59Z

0

You can play with canvas in the following manner

 <canvas id="myCanvas">Your browser does not support the canvas tag.</canvas>
<script type="text/javascript">

    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');

    // Draw blue rectangle
    ctx.fillStyle = '#0065BD';
    ctx.fillRect(0, 0, 125, 75);

    // Draw white X
    ctx.beginPath();
    ctx.lineWidth = "15";
    ctx.strokeStyle = "white";
    ctx.moveTo(0, 0);
    ctx.lineTo(125, 75);
    ctx.moveTo(125, 0);
    ctx.lineTo(0, 75);
    ctx.stroke();

</script>

Hope this helps you.

answered Mar 1, 2013 at 11:21

Shalin Jirawla

5091 gold badge5 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cathy Over a year ago

thanks for ur help this is not what i want actually if u saw the image u will understand what is my concept i can resize and rotate my image in canvas but im unable to display the height,width and angle values while resizing,rotating

Shalin Jirawla Over a year ago

I think for that you have to play with jquery where you assign x & y-axis dynamically . So when you move from 1 position to another , you see the dynamic change in position of your cursor which is the height & width of your image

Cathy Over a year ago

thanq for ur suggestion i will try with that

Collectives™ on Stack Overflow

how to display the image width,height and angle values in canvas after dropping the image

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related