Automattic / Automattic/node-canvas

Resizing canvas only partially clears Context settings

Open
#1,625 2 comments 0 reactions 0 assignees View on GitHub
Bug
Dominant language
JavaScript
Stars
10.7k
Forks
1.2k
Avg merge
4d 8h
Merged PRs (30d)
1

Description

## Issue or Feature

When I call `ctx.measureText()` several values like `ctx.lineWidth`, `ctx.fillStyle`, and `ctx.font` (but only the font size?) appear to be reset entirely. I need to set these values again afterwards in order for things to function as expected. I tried to `ctx.save()` the values and `ctx.restore()` them after, but that didn't work.
## Steps to Reproduce

```js
const Canvas = require("canvas");
const canvas = Canvas.createCanvas(1, 1);
const ctx = canvas.getContext("2d");
const text = "Hello World";
ctx.font = "32px serif";
ctx.fillStyle = "white";
const metrics = ctx.measureText(text);
canvas.width = metrics.width;
canvas.height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
ctx.fillText(text, 0, metrics.actualBoundingBoxAscent);
```
The canvas is resized correctly, but the filled text in this example isn't 32px, nor is it white.

## Your Environment
* Version of node-canvas (output of `npm list canvas` or `yarn list canvas`): 2.6.1
* Environment (e.g. node 4.2.0 on Mac OS X 10.8): Node.js v14.5.0 on both Ubuntu 18 and Windows 10.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by running the supplied Node.js reproduction and observe the context after assigning canvas.width and canvas.height following ctx.measureText(). Trace the resize path and verify the resulting behavior of ctx.font, ctx.fillStyle, ctx.lineWidth, and fillText; done means the reported settings behave consistently after resizing, with regression coverage for the example.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
computer-graphics
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.