JavaScriptでSin曲線を描く

本日無性にSin曲線を描きたくなりまして。
最速で描くとしたらどうするかな。と考えたところ。

JavaScriptをつかってCanvasにレンダリングすることにしました。

JavaScript

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
var SIZE = 300;
var MAX = SIZE / 2;

canvas.width = SIZE;
canvas.height = SIZE;

ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, SIZE, SIZE);
ctx.fillStyle = "#0D47A1";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

for (var i = 0; i < SIZE; ++i) {
    ctx.fillText("・", i, SIZE - getSin(i / SIZE) * MAX);    
}

img.src = canvas.toDataURL();
document.body.appendChild(img);

function getSin(num) {
    return Math.sin(num * Math.PI);
}

OGPにつかいたかったので、canvasをbase64化し、Imageタグのsrcにいれて画像化しました。

結果

以上です。