Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CanvasKitの描画の仕組みを調べてみる

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Hayami Shuhei Hayami Shuhei
February 28, 2025
Programming
240
0

 CanvasKitの描画の仕組みを調べてみる

新宿御苑.wasm #2025.2.28

Avatar for Hayami Shuhei

Hayami Shuhei

February 28, 2025

More Decks by Hayami Shuhei

See All by Hayami Shuhei
Claude Agent SDK を使ってみよう
Avatar for Hayami Shuhei hyshu
0
2.1k
Flutterと Vibe Coding で個人開発！
Avatar for Hayami Shuhei hyshu
1
380
BLoCパターンとflutter_bloc
Avatar for Hayami Shuhei hyshu
0
150
Melos x Pub Workspaces で 沢山のアプリとパッケージを管理するのに 苦労した話
Avatar for Hayami Shuhei hyshu
1
57
Jasprが凄い話
Avatar for Hayami Shuhei hyshu
1
390

Other Decks in Programming

See All in Programming
バックエンドにElysiaJSを採用して気付いた、良い点・悪い点
Avatar for わんこ(Wanko_IT) wanko_it
1
170
ローカルLLMでどこまでコードが書けるか / How much code can be written on a local LLM
Avatar for Naoki Kishida kishida
2
410
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
290
[BalkanRuby 2026] Drop your app/services!
Avatar for Vladimir Dementyev palkan
3
670
Are We Really Coding 10× Faster with AI?
Avatar for Koichi Yoshida kohzas
0
230
関係性から理解する"同一性"の型用語たち
Avatar for pvcresin pvcresin
2
520
RailsTokyo 2026#4: AI様があれば、
Hotwireの弱点は消えるか？
Avatar for Naofumi Kagami naofumi
5
950
要はバランスからの卒業 #yumemi_grow
Avatar for Takuma Kajikawa kajitack
0
190
Transactional Change Stream Processing With Debezium and Apache Flink
Avatar for Gunnar Morling gunnarmorling
1
130
iOS26時代の新規アプリ開発
Avatar for 野瀬田　裕樹 yuukiw00w
0
200
AI時代だからこそ「Bloc」を採用する価値があるのかもしれない
Avatar for takuro abe takuroabe
0
230
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
360

Featured

See All Featured
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
7
660
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
107
240k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
160
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
220
Designing for Performance
Avatar for Lara Hogan lara
611
70k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
10k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.7k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
170
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
12k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
340

Transcript

  1. CanvasKitͷ ඳըͷ࢓૊ΈΛௐ΂ͯΈΔ ৽॓ޚԓ.wasm #2025.2.28 aq (Hayami Shuhei)

  2. CanvasKit (Skia + Wasm) https://skia.org/docs/user/modules/canvaskit/

  3. CanvasKit • Skiaͱ͍͏2DͷඳըΤϯδϯͷWasmίϯύΠϧ • Skia͸ Google ChromeɺMozilla FirefoxɺFlutterͷ WebϏϧυɺAndroid OS

    ͳͲͰ࢖༻͞Ε͍ͯΔ • NPMͳͲ͕͋ΔͷͰWebͰ΋खܰʹѻ͑Δ

  4. CanvasKitͷجຊతͳ࢖͍ํ https://skia.org/docs/user/modules/quickstart/ ެࣜυΩϡϝϯτʹඳըͷղઆ෇͖αϯϓϧ͕͋Δ unpkg.com͔Βcanvaskit.wasmͱ ϥούʔͷcanvaskit.jsΛಡΈࠐΈɺ HTMLͷcanvasཁૉʹ੺͍࢛֯Λඳը

  5. CanvasKitͷجຊతͳ࢖͍ํ • <canvas>Λ࢖༻͍ͯ͠Δ͕HTMLͷcanvasඳըϝ ιουΛ࢖༻͍ͯ͠ͳ͍ • ͜ͷcanvasΛར༻ͯ͠WebGL2ͷContextΛऔಘɺ C++Ͱॻ͔ΕͨॲཧͰඳըͷ΄ͱΜͲΛߦ͍ɺGPU ʹίϚϯυΛૹ৴͍ͯ͠Δ ެࣜυΩϡϝϯτʹΑΔͱ…

  6. Skia಺෦Ͱͷඳը ྲྀੴʹC++ιʔείʔυΛ۷͍ͬͯ͘ͷ͸࣌ؒతʹݫ͍͠… ͱ͍͏͜ͱͰάάͬͨΒҎԼͷهࣄ͕ݟ͔ͭͬͨ WebGPUͱC++Ͱϒϥ΢β্ʹࡾ֯ϙϦΰϯඳըͯ͠ΈΔ https://zenn.dev/kd_gamegikenblg/articles/a5a8e ff e43bf3c

  7. • ͜ͷهࣄʹΑΔͱ Google Chrome Ͱ͸ Dawn (https://dawn.googlesource.com/dawn )ͱ͍͏ ΫϩεϓϥοτϑΥʔϜͰWebGPU͕ѻ͑ΔC++ͷ ϥΠϒϥϦʔΛ࢖༻͍ͯ͠Δͱͷ͜ͱ

    • SkiaͷϦϙδτϦʔͰDawnͱݕࡧͨ͠Β DawnCommandBu ff er.cppͳͲ৭ʑώοτͨ͠ͷͰ CanvasKit΋DawnͰඳըͯ͠ΔͬΆ͍ Skia಺෦Ͱͷඳը

  8. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ීஈ͸FlutterΛத৺ʹϞόΠϧΞϓϦͷ ৘ใൃ৴ͯ͠·͢ X: @aqhayami Zenn: @hyshu