After setting either strokeStyle or fillStyle to a 9-character hex code, e.g.

I have created pulse animation using html canvas. There is two rectangles. Rectangle’s positions is updated dynamically. The smaller rectangle has pulse animation. I have problem calculate it’s center position value.
Without scaling I get correct position. But when scaling position is incorrect. How to calculate scaled X and Y?

I am working on a canvas and I want it to be responsive (look same on different screen sizes), resizable (look same when browser window resizes and resize properly), size-adjustable (user can enter canvas output size) and look sharp (no blurry edges of shapes).