js初心者です。
HTML5のcanvasを使って
読み込んだ画像に何かしらの装飾(fillTextなどで画像にテキストを描画)を行い、
canvasごとpngなどの形式で書き出したいと考えています。

しかし、下記エラーが出て上手く書き出せません。ご教示いただけますと幸いです。

Script from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access.

ソースコードは以下のとおりです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>読み込んだ画像にテキストを描画</title>
  <script src="myscript.js" crossorigin="anonymous"></script>
</head>
<body>
<h1>読み込んだ画像にテキストを描画</h1>
<form>
<input type="button" value="canvasに描画" onclick="draw()">
</form>
<canvas id="mycanvas" width="400" height="400">
  Canvasに対応したブラウザを使用してください。
</canvas>
<!-- <form>
<input type="button" value="画像に変換" onclick="chgImg()">
</form> -->
<div><img id="newImg"></div>
</body>
<script src="myscript.js"></script>
</html>

myscript.js

var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');

function draw(){
  var img = new Image();
  //ローカルの画像を読み込む
  img.src = 'test.png';
  img.onload = function () {
    ctx.globalCompositeOperation = 'destination-over';
    var pattern = ctx.createPattern(img, 'no-repeat');
    ctx.fillStyle = pattern;
    ctx.drawImage(img, 10, 10);
  }
  ctx.font = 'bold 20px Verdana';
  ctx.textAlign = 'left';
  ctx.fillStyle = 'red';
  ctx.fillText('test', 20, 20, 200);
  var dataURL = canvas.toDataURL();
  document.getElementById("newImg").src = dataURL;
  console.log(dataURL);
  chgImg();
}

// 取得したtoDataURL()をpngに変換
function chgImg() {
  var png = canvas.toDataURL();
  document.getElementById("newImg").src = png;
}