Как изменить размер рисунка холста в HTML5?

Question

Я бы хотел изменить размер холста до меньшего размера, чем он есть. Вот мой код:

             var modelPane = document.getElementById('model_pane');


        //create canvasclass="modelview"
        var canvas_ = document.createElement('canvas');
        canvas_.setAttribute('width', 1160);
        canvas_.setAttribute('height', 500);
        canvas_.setAttribute('id', 'canvas');
        canvas_.setAttribute('class', 'modelview');
        var ctx_ = canvas_.getContext('2d');

        //draw
        for (i=0;i<nodes.length;i++)
                            {
            ctx_.strokeRect(nodes[i].x,  nodes[i].y, nodes[i].width, nodes[i].height);


    }

        //scale
        ctx_.scale(0.3,0.3);
    modelPane.appendChild(canvas_);

Но это не работает. Кто-нибудь знает почему? Холст не изменяет размеры до новых размеров.

Answer 1

Сначала вам нужно вызвать шкалу:

var ctx_ = canvas_.getContext('2d');
ctx_.scale(0.3,0.3);
//draw
for (i=0;i<nodes.length;i++)
    ctx_.strokeRect(nodes[i].x,  nodes[i].y, nodes[i].width, nodes[i].height);
}

Подумайте об этом, как будто вам нужно уменьшить ваш холст. Затем нарисуйте меньший холст. Пример