質問: 現在あるWeb上のページにcanvasを使ったペイント機能を実装しようと考えております。 意図は、このWebページを第三者に示しながら説明などを行うためにペイント機能で強調したい点を簡単に描画できれば、と考えたからです。 ペイントする場所は画像の上や要素の上となります。 今考えている方法は ボタンのONOFFによりペイント機能のONOFFが切り替えられるようにします。 そのボタンがONになれば透明のレイヤーをページ全体に貼り、そのレイヤー上に描画します。 そしてボタンがOFFになれば描画した状態を透明なレイヤーごと消してしまいます。 レイヤーを透明にしなければならない理由は、下にある画像や要素を完全に表示させたままにしておきたいからです。 現在の状況は、ボタンのONOFFやcanvasでのペイント機能は作成しました。 完全なる透明のレイヤーを作ることができず。 opacity: * なども試しましたが完全には透明にすることができませんでした。 どのようにすれば透明なレイヤーを作成してその上に描画できるようになりますでしょうか? よろしくお願い致します。
回答: すこしことなりますが、このような方法はいかがでしょうか? ・cssにて、バックグラウンドにwebサイトを表示させる。 →ペイントでやりたい対象ページが決まってるならば、ページ全体を画像保存して、backgraund-imageを使うとよい。 ・その上にペイント機能を載せる このような方法はいかがでしょうか?