JSFiddle - React, Tailwind, and code Playground

by shs400

HTML

<div class='wrap'>
  <canvas id="my-canvas" width="400" height="300">
    해당 브라우저는 html5 canvas element를 지원하지 않습니다.
  </canvas>
</div>

CSS

.wrap {
  text-align: center;
}

JavaScript

window.onload = setupWebGL;
var gl = null;
// gl 은 웹지엘에서 컨텍스트 객체를 참조할 떄 관례적으로 사용하는 변수명
function setupWebGL() {
  var canvas = document.getElementById("my-canvas");
  try{
    gl = canvas.getContext('experimental-webgl');
  }catch (e){
    //컨텍스트 가져오지 못하여 에러 발생시  
  }

  if(gl){
    gl.clearColor(0.1, 0.5, 0.1, 1,0);
    // clearColor(R,G,B,A)
    gl.clear(gl.COLOR_BUFFER_BIT);
  }else {
    alert('WebGL 지원 안함')
  }
}