То, что вы хотите, не может быть сделано напрямую: когда вы рисуете на холсте, вы рисуете пиксели, которые мгновенно высыхают на холсте. Если вы хотите увеличить масштаб, вам придется стереть холст (ctx.clearRect(...)
) и перекрасить круговую диаграмму, используя больше пикселей. Это то, чего требует графический интерфейс без сохранения (или режим немедленного рисования ), такой как Canvas.
Сравните это с SVG, режим рисования с сохранением графическая система, где команды для рисования контента приводят к созданию элементов, для которых вы можете отслеживать события, настраивать свойства и видеть визуальные результаты, обновленные для вы.
Вы можете «увеличить» - перерисовать круговую диаграмму больше - либо изменив свои команды рисования (больший arc
радиус, lineWidth
и т. Д.), Либо изменив свой контекст ( изменение масштаба и перевода), а затем снова введите те же команды рисования.
Существует также одна опция: если вы оставите атрибуты width
и height
холста без изменений, но измените свойства CSS
на height
и width
, которые можно увеличить на вашем холсте без перерисовки. Однако это приведет к росту каждого виртуального пикселя на холсте на экране, что приведет к пикселизации.