Chrome supports createImageBitmap() in Chrome 50 | Blog | Chrome for Developers
Decoding images for use with a canvas is pretty common, whether it’s to allow users to customize an avatar, crop an image, or just zoom in on a picture. The problem with decoding images is that it can be CPU intensive, and that can sometimes mean jank or checkerboarding. As of Chrome 50 (and in Firefox 42+) you now have another option: createImageBitmap(). It allows you to decode an image in the b
OffscreenCanvas - WHATWG Wiki
Provides more control over how canvases are rendered. This is a follow-on to the WorkerCanvas proposal and will be merged once agreement is reached. Use Case Description Feedback from web application authors using canvases have shown the need for the following controls: (From ShaderToy, Sketchfab, Verold): need to be able to render to multiple regions on the page efficiently using a single canvas
HTML 5.2: 4.13. Common idioms without dedicated elements
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
写真サービス機能のブラウザ内実装 | 株式会社サイバーエージェント
2-1. リサイズ処理 Figure 2. Mobile Safariによる画像アップロード画面 最終成果の画像データを、サーバーサイドAPIにPOSTすることがゴールである。Androidにおいて、XMLHttpRequestでBlobをリクエストに設定しても空のボディで送信される問題がみられるため、今回はBase64 encoded DataURIとしてPOSTすることにしている。 2-1-1. 基本実装 ƒ 今回のリサイズ処理では、Canvas要素とFile APIを利用する。基本方針としては、inputtype='file'のchangeイベントから、Fileオブジェクトを取得し、それを一度Canvasに書き出すことでリサイズを試みる。最終的には、canvas.toDataURL() によってDataURIを取得する。 下記に、基本実装のサンプルを示す。( http://co
High Performance Map Interactions using HTML5 Canvas - ChairNerd
Jobs at SeatGeek We are growing fast, and have lots of open positions! Explore Career Opportunities at SeatGeek Last week, you may have noticed that we released a facelift for our interactive maps. Our Deal Score markers have finally been brought up to 2014 design standards to match the Omnibox. However, what may not be as apparent is that our maps are now between 10 and 100 times faster, dependin
Happy Elements Labs: 世界平和とAndroid
エンジニアの草苅です。 スマートフォンを扱うエンジニアの皆さんは、日々Android のバグに悩まされているのではないかと思います。弊社も類に漏れず様々な Android のバグと戦っています。 特にあんさんぶるガールズ！ではアニメーションはすべて Canvas を利用していることもあり、Android の Canvas 絡みのバグに、頭を痛めています。 Android のバッドノウハウは悩んでいる人みんなで共有した方が、世のため人のためになるのではと思い立ったので、世界平和を願っていくつかまとめてみたいと思います。 1. GPUレンダリングの設定によって Canvas で不具合が発生する Android は OS のバージョンや、WebView のレンダリングエンジンの違いによって、GPUレンダリングOFFの場合に、Canvas が正常に表示できない端末、もしくはGPUレンダリングONの
jQueryでCanvasを使ってお絵かき - 実践編
ご無沙汰しております、株式会社シャノン技術統括部プロダクト開発部のHealerです。 あけましておめでとうございます。 冬も本番となり、寒さが厳しくなってきましたが、お風邪などを召しておられませんでしょうか？ そして本年も本ブログともども、弊社株式会社シャノンをよろしくお願い致します。 さて、前回、 jCanvas(jQueryプラグイン)でCanvasを使ってお絵かき - 対応ブラウザ確認編 なるものを書いてから早半年以上空いてしまいました。。 実はスケジュールの都合が合わなくて1回パスをしているんです。 当ブログは基本的に当番制でスケジュールの割り当てをいただいて技術部内の人間が順繰りに書いていくわけですが、1回だけパスが認められています。 従って、1回パスをしたところ、今回は捕まえられてどうにも逃げられず書いている次第です。(笑) という冗談はさておき、今回は jQueryでCanv
株式会社コンテンツ Contents Co.,Ltd.
株式会社コンテンツでは、 課題解決型の制作プロダクションとして、 創業以来たくさんのモノづくりをしてきました。 培ったクリエイティブと技術の力で、 新しい価値を生み出し社会をより良くするために、 さまざまなサービスやプロダクトを立ち上げています。 詳しく見る
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
Flash→HTML5移植は本当か？ ハンゲームの事例
「HTML5でFlashが不要になる」――。次世代Web標準規格「HTML5」でよく聞くのがこんなフレーズだ。ところが、実際にFlashで作ったコンテンツをHTML5（+JavaScript）で置き換えた、なんて話は（少なくとも日本では）ほとんど聞かない。本当にFlashコンテンツをHTML5で（しかも商用レベルで）置き換えられるのだろうか？ そう思っていたら、あの「ハンゲーム」を手掛けるNHN JapanがモバイルゲームのHTML5化を着々と進めていると聞き、同社の「HTML5勉強会」（2月25日開催）に行ってみた。勉強会では同社のエンジニアが、HTML5/CSS3によるオンラインゲームの開発事例について語った。
スマートフォンのcanvasタグのバグのまとめ - yukobaのブログ
ほとんどのスマートフォンのウェブブラウザはcanvasタグに対応していますが、バグだらけです。以下、色々な環境で試したバグのまとめです。 iPhone OS 3.1 このバグは iOS 4 では、直っています。 iPhone OS 3.1 では、fillText() などの文字列描画系がバグっています。画面が上下反転して、フォントなども反映しません。お持ちの方は 実際のサンプル - fillText() メソッド - Canvasリファレンス - HTML5.JP でお試しください。おかしな位置に文字が表示されます。このバグは、iPod touch、iPhone 全てで発生します。 まもなく、iPhone OS 3.2 が出ますが、直っていることを強く祈ります！ Android 2.1 このバグはAndroid 2.2では、直っています。 Android 2.0, 2.1が、一番ひどいです
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvas toBlob() support added in chrome 50 | Blog | Chrome for Developers
HTML Canvas 2D Context is a W3C Recommendation
WordPress › Error