CodePenを活用したい（Canvasで画面ぴっちり方法）

Canvasで何かを作って残しておくのはむつかしいです。

特に、アニメーションだったり、マウスに反応するものだったりするとむつかしい。

JavaScriptのコードをWebサイトにして残しておけばいいのですが、面倒です。

簡単な作業でブログに残したい。

CodePenを活用

そこで、CodePenを活用できればと思っています。

CodePenは便利で利用は簡単ですが、過去に使った時にうまくいかなかったので避けていました。

しかし、いろんな人がちゃんと使っているので私の使い方が悪かったと思い直して、活用していきたいと思います。

使ってみる

テストで使ってみました。

問題なさそうです。

See the Pen 230718-1 by yusaku (@yuuuha) on CodePen.

ただいつものように作ってしまうと、画面いっぱいにならずに不自然になります。

そこで、CodePen用に画面ぴっちりで作成してみました。

コード

▼ HTML

widthとheightを100％にしてみました。

<canvas id='canvas' width="100%" height='100%'></canvas>

▼ CSS

overflowをhidden、marginをゼロにして、#canvasのwidthを100％にしました。

html {
  overflow: hidden;
}

body {
  margin: 0;
}

#canvas {
  background-color: cornflowerblue;
  width: 100%;
  height: auto;
}

▼ JavaScript

innerWidthとinnerHeightをcanvas.widthとcanvas.heightに入れています。

let canvas, ctx;
let innerWidth, innerHeight;

window.addEventListener("load", () => {
  initial();
  myrender();
});

function initial() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");

  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  innerWidth = canvas.width;
  innerHeight = canvas.height;
}

function myrender() {
  ctx.beginPath();
  ctx.arc(innerWidth / 2, innerHeight / 2, 30, 0, Math.PI * 2, false);
  ctx.fillStyle = "white";
  ctx.fill();
}