Делаю простенький редактор фотографий на canvas
Есть такой код
Класс рисования:
function Sketch(name) {
this.startDrawing = function(e)
{
this.isDrawing = true;
this.context.beginPath();
this.context.moveTo(e.pageX - this.canvas.offsetLeft, e.pageY - this.canvas.offsetTop);
}
this.draw = function(e)
{
if (this.isDrawing == true)
{
var x = e.pageX - this.canvas.offsetLeft;
var y = e.pageY - this.canvas.offsetTop;
this.context.lineTo(x, y);
this.context.stroke();
}
}
this.stopDrawing = function()
{
this.isDrawing = false;
}
this.isDrawing;
this.canvas = document.getElementById(name);
this.context = this.canvas.getContext("2d");
// Подключаем требуемые для рисования события
this.canvas.onmousedown = this.startDrawing.bind(this);
this.canvas.onmouseup = this.stopDrawing.bind(this);
this.canvas.onmouseout = this.stopDrawing.bind(this);
this.canvas.onmousemove = this.draw.bind(this);
//this.canvas.bind('mousedown mouseup mousemove mouseout', this.onEvent);
this.context.lineWidth = 4;
this.context.strokeStyle = '#ff0';
this.context.lineJoin = "round";
this.context.lineCap = "round";
};
Т.к. редактор должен быть адаптинвым ширину и выосту картинки приходиться высчитывать пропорционально на js
jQuery(document).ready(function () {
var block = $('#block-canvas').width();
var new_height = (wcanvas * height) / width;
if(width < block)
{
$('#sketch').width(width+'px');
}
else
{
$('#sketch').width('100%');
}
var wcanvas = $('#sketch').width();
var new_height = (wcanvas * height) / width;
$('#sketch').height(new_height);
var sketch = new Sketch('sketch');
В последней строке я запускаю класс и он работает - рисует НО расположение линий не правильное хотя координаты вроди правильные... вообщем так не объяснить, посмотрите как оно работает сейчас
http://w91829a8.bget.ru/photo2/photo...er-install.jpg
соответсвенно нужно что бы рисовалось правильно.
Но если не задавать высоту и ширину с помощью js то рисуется правильно.
В чем проблема может быть?