CODEWITHSUNDEEP
javascripthtml5-canvas
Sladar
Sladar

Reputation: 65

After the width or height of a canvas element changed, the font for its 2d context set to default value

var cvs = Damoo.dom.createElement('canvas'),
    ctx = cvs.getContext('2d');
ctx.font = f.value;
cvs.width = ctx.measureText("text").width;
cvs.height = f.size * 1.2;
//now the font value set to default value, you must reset it
ctx.font = f.value;

So anyone knows is this a bug or by design? The environment is latest Chrome

When I try save and restore, the code is

var cvs = Damoo.dom.createElement('canvas'),
    ctx = cvs.getContext('2d');
ctx.font = f.value;
cvs.save();
cvs.width = ctx.measureText("text").width;
cvs.height = f.size * 1.2;
//now the font value set to default value, you must reset it
//ctx.font = f.value;
cvs.restore();

Upvotes: 1

Views: 340

Answers (1)

aekarahan
aekarahan

Reputation: 39

ctx.save() and ctx.restore() ignore the font value. Instead of restore, reset your font (They probably forgot to include it because any other explanation is pointless.)

Solution:

ctx.font = f.value;
...measureText and adjust canvas size
ctx.font = f.value;

Upvotes: 1

Related Questions