JavaScriptでDOM要素をcanvasに描画して、テキストのコピーを制限します。制限といってもhtmlのソースを見れば、そこに書かれていてコピーも可能ですので、コピーして欲しくないという姿勢を示すだけに留まります。

サンプルのテキストは、htmlのDOM要素をcanvasに描画しているので、テキストとして選択、コピーができない仕組みになっています。ただし、htmlの要素を直接canvasに描画できないので、svg画像の中の <foreignObject>にhtml要素を内包させ、そのsvg画像をcanvasに描画しています。

サンプル

 

html（描画するcanvas要素と元のDOM要素）ソース

<canvas id="world"></canvas>
<div id="dom">
    <h1 style="font-size:22px;color:#48e;">h1要素のサンプルテキスト</h1>
    <h2 style="font-size:18px;color:#46c;">h2要素のサンプルテキスト</h2>
    <div>
        <p style="font-size:15px;color:#666;">div要素　&gt;　p要素のサンプルテキスト</p>
        <ul>
            <li style="font-size:15px;color:#377;">div要素　&gt;　ul要素　&gt;　li要素のサンプルテキスト（１）</li>
            <li style="font-size:15px;color:#737;">div要素　&gt;　ul要素　&gt;　li要素のサンプルテキスト（２）</li>
            <li style="font-size:15px;color:#773;">div要素　&gt;　ul要素　&gt;　li要素のサンプルテキスト（３）</li>
        </ul>
    </div>
</div>