Lines Matching refs:CanvasKit
2 title: 'CanvasKit - Skia + WebAssembly'
3 linkTitle: 'CanvasKit - Skia + WebAssembly'
11 CanvasKit provides a playground for testing new Canvas and SVG platform APIs,
136 let CanvasKit = null;
147 CanvasKit = CK;
148 DrawingExample(CanvasKit);
149 InkExample(CanvasKit);
150 ShapingExample(CanvasKit);
152 SkottieExample(CanvasKit, 'sk_legos', legoJSON, [-183, -100, 483, 400]);
154 SkottieExample(CanvasKit, 'sk_drinks', drinksJSON, fullBounds);
155 SkottieExample(CanvasKit, 'sk_party', confettiJSON, fullBounds);
156 SkottieExample(CanvasKit, 'sk_onboarding', onboardingJSON, fullBounds);
157 ShaderExample1(CanvasKit);
163 SkottieExample(CanvasKit, 'sk_legos', legoJSON, [-183, -100, 483, 400]);
170 SkottieExample(CanvasKit, 'sk_drinks', drinksJSON, fullBounds);
177 SkottieExample(CanvasKit, 'sk_party', confettiJSON, fullBounds);
184 SkottieExample(CanvasKit, 'sk_onboarding', onboardingJSON, fullBounds);
200 function DrawingExample(CanvasKit) {
201 const surface = CanvasKit.MakeCanvasSurface('patheffect');
205 const context = CanvasKit.currentContext();
209 const paint = new CanvasKit.Paint();
211 const textPaint = new CanvasKit.Paint();
212 textPaint.setColor(CanvasKit.Color(40, 0, 0, 1.0));
215 const textFont = new CanvasKit.Font(null, 30);
223 const path = starPath(CanvasKit, X, Y);
224 CanvasKit.setCurrentContext(context);
225 const dpe = CanvasKit.PathEffect.MakeDash([15, 5, 5, 10], i/5);
229 paint.setStyle(CanvasKit.PaintStyle.Stroke);
232 paint.setColor(CanvasKit.Color(66, 129, 164, 1.0));
234 canvas.clear(CanvasKit.Color(255, 255, 255, 1.0));
262 function InkExample(CanvasKit) {
263 const surface = CanvasKit.MakeCanvasSurface('ink');
267 const context = CanvasKit.currentContext();
271 let paint = new CanvasKit.Paint();
273 paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
274 paint.setStyle(CanvasKit.PaintStyle.Stroke);
277 paint.setPathEffect(CanvasKit.PathEffect.MakeCorner(50));
280 let path = new CanvasKit.Path();
299 CanvasKit.setCurrentContext(context);
320 …paint.setColor(CanvasKit.Color(Math.random() * 255, Math.random() * 255, Math.random() * 255, Math…
322 path = new CanvasKit.Path();
336 function ShapingExample(CanvasKit) {
337 const surface = CanvasKit.MakeCanvasSurface('shaping');
360 const font = new CanvasKit.Font(null, 18);
361 const fontPaint = new CanvasKit.Paint();
362 fontPaint.setStyle(CanvasKit.PaintStyle.Fill);
368 const context = CanvasKit.currentContext();
377 const fontMgr = CanvasKit.FontMgr.FromData([robotoData, emojiData]);
379 const paraStyle = new CanvasKit.ParagraphStyle({
381 color: CanvasKit.BLACK,
385 textAlign: CanvasKit.TextAlign.Left,
390 const builder = CanvasKit.ParagraphBuilder.Make(paraStyle, fontMgr);
398 CanvasKit.setCurrentContext(context);
399 skcanvas.clear(CanvasKit.WHITE);
432 function starPath(CanvasKit, X=128, Y=128, R=116) {
433 let p = new CanvasKit.Path();
442 function SkottieExample(CanvasKit, id, jsonStr, bounds) {
443 if (!CanvasKit || !jsonStr) {
446 const animation = CanvasKit.MakeAnimation(jsonStr);
452 const surface = CanvasKit.MakeCanvasSurface(id);
456 const context = CanvasKit.currentContext();
464 CanvasKit.setCurrentContext(context);
475 function ShaderExample1(CanvasKit) {
476 if (!CanvasKit) {
479 const surface = CanvasKit.MakeCanvasSurface('shader1');
484 const paint = new CanvasKit.Paint();
506 const context = CanvasKit.currentContext();
507 const fact = CanvasKit.RuntimeEffect.Make(prog);
509 CanvasKit.setCurrentContext(context);
510 skcanvas.clear(CanvasKit.WHITE);
519 skcanvas.drawRect(CanvasKit.LTRBRect(0, 0, 512, 512), paint);
528 const surface = CanvasKit.MakeCanvasSurface('camera3d');
537 let clickToWorld = CanvasKit.M44.identity();
538 let worldToClick = CanvasKit.M44.identity();
540 let rotation = CanvasKit.M44.identity();
542 let clickRotation = CanvasKit.M44.identity();
550 const rr = CanvasKit.RRectXY(CanvasKit.LTRBRect(margin, margin,
574 const imgscale = CanvasKit.Matrix.scaled(2, 2);
575 const textureShader = CanvasKit.MakeImageFromEncoded(textureImgData).makeShaderCubic(
576 CanvasKit.TileMode.Clamp, CanvasKit.TileMode.Clamp, 1/3, 1/3, imgscale);
577 const normalShader = CanvasKit.MakeImageFromEncoded(normalImgData).makeShaderCubic(
578 CanvasKit.TileMode.Clamp, CanvasKit.TileMode.Clamp, 1/3, 1/3, imgscale);
610 const fact = CanvasKit.RuntimeEffect.Make(prog);
619 return CanvasKit.Vector.add(CanvasKit.Vector.mulScalar([...vSphereCenter, 0], 0.5),
620 CanvasKit.Vector.mulScalar(vSphereUnitV3(lightLocation), lightDistance));
626 const paint = new CanvasKit.Paint();
628 paint.setColor(CanvasKit.WHITE);
630 paint.setColor(CanvasKit.BLACK);
637 return CanvasKit.M44.multiply(
638 CanvasKit.M44.rotated([0,1,0], ry),
639 CanvasKit.M44.rotated([1,0,0], rx),
640 CanvasKit.M44.translated([0, 0, scale]));
645 {matrix: faceM44( 0, 0, faceScale ), color:CanvasKit.RED}, // front
646 {matrix: faceM44( 0, Math.PI, faceScale ), color:CanvasKit.GREEN}, // back
648 {matrix: faceM44( Math.PI/2, 0, faceScale ), color:CanvasKit.BLUE}, // top
649 {matrix: faceM44(-Math.PI/2, 0, faceScale ), color:CanvasKit.CYAN}, // bottom
651 {matrix: faceM44( 0, Math.PI/2, faceScale ), color:CanvasKit.MAGENTA}, // left
652 {matrix: faceM44( 0,-Math.PI/2, faceScale ), color:CanvasKit.YELLOW}, // right
660 var m2 = CanvasKit.M44.invert(m);
662 m2 = CanvasKit.M44.identity();
671 worldToClick = CanvasKit.M44.multiply(CanvasKit.M44.mustInvert(matrix), l2d);
672 clickToWorld = CanvasKit.M44.mustInvert(worldToClick);
683 return CanvasKit.M44.transpose(CanvasKit.M44.mustInvert(m));
687 const trans = new CanvasKit.M44.translated([vSphereRadius/2, vSphereRadius/2, 0]);
688 const localToWorld = new CanvasKit.M44.multiply(m, CanvasKit.M44.mustInvert(trans));
689 canvas.concat(CanvasKit.M44.multiply(trans, localToWorld));
695 const paint = new CanvasKit.Paint();
707 canvas.concat(CanvasKit.M44.setupCamera(
708 CanvasKit.LTRBRect(0, 0, vSphereRadius, vSphereRadius), vSphereRadius/2, cam));
713 drawCubeFace(canvas, CanvasKit.M44.multiply(clickRotation, rotation, f.matrix), f.color);
720 const paint = new CanvasKit.Paint();
722 paint.setStyle(CanvasKit.PaintStyle.Stroke);
723 paint.setColor(CanvasKit.Color(64, 255, 0, 1.0));
738 let v = CanvasKit.Vector.mulScalar(CanvasKit.Vector.sub(p, vSphereCenter), 1/vSphereRadius);
741 let len2 = CanvasKit.Vector.lengthSquared(v);
743 v = CanvasKit.Vector.normalize(v);
756 axis = CanvasKit.Vector.cross(u, v);
757 const sinValue = CanvasKit.Vector.length(axis);
758 const cosValue = CanvasKit.Vector.dot(u, v);
760 let m = new CanvasKit.M44.identity();
762 m = CanvasKit.M44.rotatedUnitSinCos(
763 CanvasKit.Vector.mulScalar(axis, 1/sinValue), sinValue, cosValue);
773 clickRotation = CanvasKit.M44.rotated(axis, totalSpin);
783 rotation = CanvasKit.M44.multiply(clickRotation, rotation);
784 clickRotation = CanvasKit.M44.identity();
815 if (CanvasKit.Vector.dist(eventPos, lightLocation) < lightIconRadius) {
849 Test your code on our [CanvasKit Fiddle](https://jsfiddle.skia.org/canvaskit)
853 Get [CanvasKit on NPM](https://www.npmjs.com/package/canvaskit-wasm).