Bug 23067

Summary: [CG] Canvas: stroked text with pattern or gradient can have truncated miters
Product: WebKit Reporter: Simon Fraser (smfr) <simon.fraser>
Component: CanvasAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: dino, krit, mdelaney7, oliver, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: 528+ (Nightly build)   
Hardware: Mac   
OS: OS X 10.5   
Attachments:
Description Flags
Testcase none

Simon Fraser (smfr)
Reported 2009-01-01 13:51:59 PST
CanvasRenderingContext2D::drawTextInternal() uses the computed textRect as the size of the mask image created for painting text stroke with a gradient or pattern. textRect is too small if stroking text, because it does not take the bounds of the stroke into account; it fails to account for miters etc.
Attachments
Testcase (1.28 KB, text/html)
2009-01-01 13:58 PST, Simon Fraser (smfr) 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2009-01-01 13:58:02 PST
Created attachment 26351 [details] Testcase
Dirk Schulze
Comment 2 2009-02-05 12:39:51 PST
Maybe Path::strokeBoundingRect() can help here. We moved it from SVG to Path. See SVGPaintServer.cpp and RenderObject.cpp for the usage.
Dirk Schulze
Comment 3 2009-02-27 00:25:47 PST
Other platforms don't use clipToImageBuffer anymore. That means it's only a CG related bug. My last suggestion can't work here. Text's are no paths :-P But why using clipToImageBuffer for both, gradients and pattern. We just need it for gradients, right?
Radar WebKit Bug Importer
Comment 4 2020-10-29 14:02:43 PDT
<rdar://problem/70824500>
Dustin.turner444
Comment 5 2025-12-25 07:38:25 PST
Comment on attachment 26351 [details] Testcase ><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > "http://www.w3.org/TR/html4/loose.dtd"> > ><html lang="en"> ><head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> > <title>Canvas Incremental Repaint</title> > <style type="text/css" media="screen"> > canvas { > width: 400px; > height: 200px; > border: 2px solid black; > } > </style> > <script type="text/javascript" charset="utf-8"> > > function initializeCanvas() > { > var canvas = document.getElementById('canvas'); > canvas.height = 200; > canvas.width = 400; > var ctx = canvas.getContext('2d'); > > ctx.font = "80px 'Times New Roman'"; > ctx.lineWidth = 40; > ctx.fillStyle = 'black'; > > var gradient = ctx.createLinearGradient(0, 0, 0, 150); > gradient.addColorStop(0, 'yellow'); > gradient.addColorStop(1, 'red'); > > ctx.strokeStyle = 'gray'; > ctx.strokeText("VW", 30, 100); > ctx.fillText("VW", 30, 100); > > ctx.strokeStyle = gradient; > ctx.strokeText("VW", 220, 100); > ctx.fillText("VW", 220, 100); > } > > function pageLoaded() > { > initializeCanvas(); > } > </script> ></head> ><body onload="pageLoaded()"> > ><p>Miters on gradient stroke should not be truncated</p> ><canvas id="canvas"></canvas> > ></body> ></html>
Note You need to log in before you can comment on or make changes to this bug.