В приложение рисунок который получается в canvas.
Его размеры 600x600 я хочу убрать правую, пустую часть и сделать его 300x600
Но как только я это делаю, рисунок уезжает за приделы видимой части.
Надеюсь понятная моя проблема, помогите пожалуйста ее решить.
<div class="knob">
<canvas class="knob-canvas" width="300" height="600"></canvas>
</div>
var canvas;
var ctx;
window.addEventListener('load', onLoad);
function onLoad() {
canvas = document.querySelector(".knob-canvas");
ctx = canvas.getContext("2d");
draw();
}
var mouseX = 0;
var mouseY = 0;
var r = 250;
var l = 40;
var n = 450/1.8;
function draw() {
var relativeMouseX = (canvas.width/2) - (canvas.width - mouseX);
var relativeMouseY = (canvas.height/2) - (canvas.height - mouseY);
var moused = xyToDeg(relativeMouseX, relativeMouseY);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < n; i++) {
var t = i*(360/n);
var tr = (degToRad(t-90)) % 360;
if (t > 330 || t < 200) continue;
var deltaT = moused - t;
deltaT = degToRad(deltaT)
if (moused < (t - 20) || moused > (t + 20)) {
var deltaR = 0;
}
var dl = l;
if (i % 2 == 0) dl = l/1.1;
if (Math.round(t) % 45 == 0) dl = 1.15*l;
var fromX = canvas.width / 2 + r * Math.cos(tr);
var fromY = canvas.height / 2 + r * Math.sin(tr);
var toX = canvas.width / 2 + (r + dl + deltaR) * Math.cos(tr);
var toY = canvas.height / 2 + (r + dl + deltaR) * Math.sin(tr);
ctx.beginPath();
ctx.moveTo(fromX, fromY);
ctx.lineTo(toX, toY);
ctx.lineWidth = 1.5;
ctx.strokeStyle = 'hsla(' + ((t/2)-130) + ', 100%, 50%, 1)';
ctx.stroke();
}
window.requestAnimationFrame(draw);
}
function degToRad(deg) {
return deg * (Math.PI / 180);
}
function xyToDeg(x, y) {
var d = Math.atan2(x, y) * (180 / Math.PI);
if (d < 0) {
d = 180 - d;
}
return d;
}
