Re-size Canvas without reducing its width and height (Coordinates)

Question

I have drawn a picture in canvas and paint some points according to user mouse clicks. I Used mathematical calculation in order to show some panel names in picture once user hover over as tool tips. I use canvas coordinates and scales percentages. My problem is when i re-size window to smaller window (I used Mozilla responsive mode Mobile device) the it gives wrong coordinates.

Actual size of canvas is - 460 ,550 In mobile window mode it is around 250,350

I have used following style

#splatExteriorImage {
    background-image: url(../images/SPLAT1.jpg);
    background-size: cover;
    z-index: 0;
    background-color: #F5F5F5;
}

How can i re-size canvas without reducing its coordinates. Thanks In Advance,

Do you define width and height attributes in <canvas> tag in html? — Sébastien Doncker
Are you talking about the HTML5 canvas tag? Please post your HTML. — Brian
Yes My Canvas HTML5 - <canvas id="splatExteriorImage" width="460" height="550"></canvas> — KDS
I can re-size the canvas correctly by applying a responsive css. The problem is when re-size the canvas the coordinates goes wrong. Earlier the maximum coordinate was (460,550). After re-sizing it has become around 250,350. — KDS

speciesUnknown speciesUnknown · Accepted Answer · 2015-07-14T23:00:12

The dimensions of a canvas rendering surface are independent of the dimensions of the canvas tag.

For example:

<canvas width=400 height=300 style="width: 800px; height: 600px;"></canvas>

You can change the width and height of the drawing surface independently of the height in CSS.

To specifically change the height of the rendering surface, use

setAttribute("height", "500");

Re-size Canvas without reducing its width and height (Coordinates)

1 Answers