自作のGreasemonkeyスクリプト

Canvasタグで作るお絵かきツール

// ==UserScript==
// @name        Canvasタグで作るお絵かきツール
// @namespace   su10
// @description せつめいぶんだよ
// @include     http://*
// @version     1.0.0
// ==/UserScript==

var body = document.getElementsByTagName("body")[0];
body_style = document.defaultView.getComputedStyle(body, "");

//iframeで読み込まれる小さいページ内では動作させない
if(body_style.width.split("px")[0] < 500) return;
if(body_style.height.split("px")[0] < 700) return;

var canvas = document.createElement("canvas");
canvas.id = "draw_zone";
//canvas.style.backgroundColor = "blue";
//canvas.style.opacity = "0.3";
canvas.width = body_style.width.split("px")[0];
canvas.height = body_style.height.split("px")[0];
canvas.style.display = "none";
canvas.style.margin = "0";
canvas.style.padding = "0";
canvas.style.position = "absolute";
canvas.style.top = "0";
canvas.style.left = "0";
canvas.style.zIndex = "999999";

drawFlg = false;
scroll_x = 0;
scroll_y = 0;

function window_scroll() {
    scrollX = window.scrollX;
    scrollY = window.scrollY;
}

function draw(e) {
    if(!drawFlg) return;
    var x = e.clientX + scrollX;
    var y = e.clientY + scrollY;
    var context = canvas.getContext("2d");
    context.fillStyle = "rgba(255,0,0,1)";
    context.fillRect(x,y,8,8);
}

canvas.addEventListener("mousedown", function(){drawFlg = true;}, true);
canvas.addEventListener("mouseup", function(){drawFlg = false;}, true);
canvas.addEventListener("mousemove", draw, true);
window.addEventListener("scroll", window_scroll, true);
window_scroll();

body.addEventListener("dblclick", function(){
    canvas.style.display = "block";
    alert("ラクガキ開始！（右クリックで終了）");
}, false);
canvas.addEventListener("contextmenu", function(){canvas.style.display = "none";}, false);

body.appendChild(canvas);