• Home
  • Raw
  • Download

Lines Matching refs:CanvasKit

3 title: "CanvasKit - Quickstart"
4 linkTitle: "CanvasKit - Quickstart"
9 CanvasKit is a wasm module that uses Skia to draw to canvas elements a more advance feature set tha…
26 ckLoaded.then((CanvasKit) => {
27 const surface = CanvasKit.MakeCanvasSurface('foo');
29 const paint = new CanvasKit.Paint();
30 paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));
31 paint.setStyle(CanvasKit.PaintStyle.Stroke);
33 const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15);
36 canvas.clear(CanvasKit.WHITE);
51 ckLoaded.then((CanvasKit) => {
52 const surface = CanvasKit.MakeCanvasSurface('foo');
54 const paint = new CanvasKit.Paint();
55 paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));
56 paint.setStyle(CanvasKit.PaintStyle.Stroke);
58 const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15);
61 canvas.clear(CanvasKit.WHITE);
70 `<canvas id=foo width=300 height=300></canvas>` Creates the canvas to which CanvasKit will draw.
73 CanvasKit isn't calling the HTML canvas's own draw methods. It is using this canvas element to
88 ckLoaded.then((CanvasKit) => {
92 that resolves with the loaded module, which we typically name `CanvasKit`.
96 const surface = CanvasKit.MakeCanvasSurface('foo');
105 const paint = new CanvasKit.Paint();
106 paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));
107 paint.setStyle(CanvasKit.PaintStyle.Stroke);
109 const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15);
118 canvas.clear(CanvasKit.WHITE);
126 We also delete the paint object. CanvasKit objects created with `new` or methods prefixed with
149 ckLoaded.then((CanvasKit) => {
150 const surface = CanvasKit.MakeCanvasSurface('foo2');
152 const paint = new CanvasKit.Paint();
153 paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));
154 paint.setStyle(CanvasKit.PaintStyle.Stroke);
156 // const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15);
176 canvas.clear(CanvasKit.WHITE);
177 const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(x, y, x+w, y+h), 25, 15);
188 ckLoaded.then((CanvasKit) => {
189 const surface = CanvasKit.MakeCanvasSurface('foo2');
191 const paint = new CanvasKit.Paint();
192 paint.setColor(CanvasKit.Color4f(0.9, 0, 0, 1.0));
193 paint.setStyle(CanvasKit.PaintStyle.Stroke);
195 // const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(10, 60, 210, 260), 25, 15);
216 canvas.clear(CanvasKit.WHITE);
217 const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(x, y, x+w, y+h), 25, 15);
232 canvas.clear(CanvasKit.WHITE);
253 One of the biggest features that CanvasKit offers over the HTML Canvas API is paragraph shaping.
255 CanvasKit and the font file are ready.
262 Promise.all([ckLoaded, loadFont]).then(([CanvasKit, robotoData]) => {
263 const surface = CanvasKit.MakeCanvasSurface('foo3');
265 canvas.clear(CanvasKit.Color4f(0.9, 0.9, 0.9, 1.0));
267 const fontMgr = CanvasKit.FontMgr.FromData([robotoData]);
268 const paraStyle = new CanvasKit.ParagraphStyle({
270 color: CanvasKit.BLACK,
274 textAlign: CanvasKit.TextAlign.Left,
277 const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
292 Promise.all([ckLoaded, loadFont]).then(([CanvasKit, robotoData]) => {
293 const surface = CanvasKit.MakeCanvasSurface('foo3');
295 canvas.clear(CanvasKit.Color4f(0.9, 0.9, 0.9, 1.0));
297 const fontMgr = CanvasKit.FontMgr.FromData([robotoData]);
298 const paraStyle = new CanvasKit.ParagraphStyle({
300 color: CanvasKit.BLACK,
304 textAlign: CanvasKit.TextAlign.Left,
307 const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
318 const fontMgr = CanvasKit.FontMgr.FromData([robotoData]);
320 Creates an object that provides fonts by name to various text facilities in CanvasKit. You could
325 const paraStyle = new CanvasKit.ParagraphStyle({
327 color: CanvasKit.BLACK,
331 textAlign: CanvasKit.TextAlign.Left,
342 const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
351 const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
353 const boldTextStyle = CanvasKit.TextStyle({
354 color: CanvasKit.BLACK,
357 fontStyle: {'weight': CanvasKit.FontWeight.Bold},