HTMLのcanvasで背景が白色のjpegを作る #HTML5

HTML5のcanvas要素を使って描いた絵の背景は、白ではなく透明です

これをファイルにして取り出したい時は普通 toDataURL を使いますよね

hoge.js

var canvas = document.getElementById("myCanvas");
var datauri = canvas.toDataURL("image/jpeg",0.5);//品質0.5は下げ過ぎか…？

pngなら透明のまま吐き出されますが、jpegにすると背景が黒になります

最初から黒背景で描いてるならいいですが、白背景で描いてた場合、全然違うイメージの絵ができちゃいますね

なので、絵を書き始める前の最初の段階で、透明の背景を、白く塗りつぶしちゃいましょう。

HTML側のcanvas要素がこんな感じとすると

test.html

<html>
<body>
    <!-- 横300px、縦200pxのcanvas要素 -->
    <canvas id="myCanvas" width="300" height="200"></canvas>

    <!-- javascriptの読み込みは必要に応じて -->
    <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
    <script src="../test.js"></script>
</body>
</html>

create.jsならこう

test.js

canvas = document.getElemenById("myCanvas");
stage = new createjs.Stage(canvas);
var bg_shape = new.createjs.Shape();//shapeインスタンスを作る
bg_shape.graphics.f("white").dr(0,0,300,300);//形を白い四角に決める
stage.addChild(bg_shape);//白い四角をステージに置いて
stage.update();//canvasに描画
stage.removeChild(bg_shape);//白い四角をステージから降ろします

f は beginFill 、 dr は drawRect の短縮形(Tiny API)です。短縮前とまったく同じ働きをします。

create.jsを使ったcanvas描画は、セルアニメみたいなイメージですね。

白い四角を作って、撮影ステージに上げて、カシャッと撮影した映像がcanvasに描かれる。

ここで作ったshapeインスタンスは、後から似たような図形を描いたり動かしたりしたい時に重宝しますが、今回はもう要りませんので、後から悪さしないようにステージから降ろしておきます。

create.js使わないならこう

test.js

canvas = document.getElemenById("myCanvas");
ctx = canvas.getContext("2d");
ctx.fillStyle = "#FFFFFF";//筆に白い絵の具をつけて
ctx.fillRect(0,0,300,200);//四角を描く

こちらは、カンバスに直接白い絵の具をベチャッと塗っちゃうイメージです。

この四角形のオブジェクトを後から使いまわして、色を変えたり動かしたりとかはできません。

筆で上書きするしかないですね。

で、作ったのがこちら

岡竜之介の大喜利道場

お題に対して、面白い回答を投稿するサイトです。

回答として、絵を描いて投稿することができます。その部分で今回の手法を使ってます。

よかったら遊びに来て下さい！

以上です