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

i have drawn picture in canvas , paint points according user mouse clicks. used mathematical calculation in order show panel names in picture once user hover on tool tips. use canvas coordinates , scales percentages. problem when re-size window smaller window (i used mozilla responsive mode mobile device) gives wrong coordinates.

actual size of canvas - 460 ,550 in mobile window mode 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 re-size canvas without reducing coordinates. in advance,

the dimensions of canvas rendering surface independent of dimensions of canvas tag.

for example:

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

you can change width , height of drawing surface independently of height in css.

to change height of rendering surface, use

setattribute("height", "500");