Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
4.6 kB
0
Indexable
Never
<!DOCTYPE html>
<html>
  <head>
    <title>Belajar Canvas 075</title>
  </head>
  <body>
    <canvas id="GL_Canvas" width="800" height="1200" style="border:1px solid #000;"></canvas>
    <script type="text/javascript">
      var canvas = document.getElementById("GL_Canvas");
      var ctx = canvas.getContext("2d");

      // ---------------------text---------------------
      
      ctx.font = '40px Arial';
      ctx.strokeText('Hello world', 20, 650);
      ctx.fillText('Hello world', 20, 750);

      ctx.strokeStyle = "orange";
      ctx.moveTo(320, 620);
      ctx.lineTo(320, 770);
      ctx.stroke();

      ctx.font = "15px Arial";
      ctx.textAlign="start";
      ctx.fillText("textAlign = start", 320, 660);
      ctx.textAlign="end";
      ctx.fillText("textAlign = end", 320, 680);
      ctx.textAlign="left";
      ctx.fillText("textAlign = left", 320, 700);
      ctx.textAlign="center";
      ctx.fillText("textAlign = center", 320, 720);
      ctx.textAlign="right";
      ctx.fillText("textAlign = right", 320, 740);

      ctx.moveTo(5, 900);
      ctx.lineTo(425, 900);
      ctx.stroke();

      ctx.textBaseline="alphabetic";
      ctx.fillText("Alphabetic", 80, 900);
      ctx.textBaseline="top";
      ctx.fillText("Top", 120, 900);
      ctx.textBaseline="hanging";
      ctx.fillText("Hanging", 200, 900);
      ctx.textBaseline="middle";
      ctx.fillText("Middle", 260, 900);
      ctx.textBaseline="ideographic";
      ctx.fillText("Ideographic", 360, 900);
      ctx.textBaseline="bottom";
      ctx.fillText("Bottom", 420, 900);

      ctx.fillText('Halo!', 550, 650);
      ctx.direction = 'rtl';
      ctx.fillText('Halo!', 550, 730);

      var kata = 'ABCD';
      var objekTeks = ctx.measureText(kata);
      ctx.fillText(kata, objekTeks.width, 1020);

      var img = new Image();
      img.src = "pathImage";
      img.onload = function() {
        ctx.drawImage(img, x, y + 600);
      }

      // --------------------gambar--------------------

      var gambar = new Image();
      gambar.src = "https://i.imgur.com/jAMkx3n.png";
      gambar.onload = function() {
        ctx.drawImage(gambar, 30, 30, 180, 180);

        var imgDataA = ctx.getImageData(30, 30, 180, 180);
        var pixelsA = imgDataA.data;
        for (var i = 0; i < pixelsA.length; i += 4) {
          let lightness = parseInt((pixelsA[i] + pixelsA[i + 1] + pixelsA[i + 2]) / 3);
          pixelsA[i] = lightness; 
          pixelsA[i + 1] = lightness; 
          pixelsA[i + 2] = lightness;
        }
        ctx.putImageData(imgDataA, 30, 30);
		  	ctx.drawImage(gambar, 74, 55, 72, 72, 30, 250, 80, 80);


			  ctx.drawImage(gambar, 460, 20, 100, 100);

			  var imgDataB = ctx.getImageData(460, 20, 100, 100);
        var pixelsB = imgDataB.data;
        for (var i = 0; i < pixelsB.length; i += 4) {
          pixelsB[i] ^= 255
          pixelsB[i + 1] ^= 255
          pixelsB[i + 2] ^= 255
        }
        ctx.putImageData(imgDataB, 460, 20);

        ctx.drawImage(gambar, 300, 20, 90, 90);
        


        function applyBrightness(data, brightness) {
          for (var i = 0; i < data.length; i = 4) {
            data[i]  += 255 * (brightness / 100)
            data[i + 1] += 255 * (brightness / 100)
            data[i + 2] += 255 * (brightness / 100)
          }
        }
        
        ctx.drawImage(gambar, 280, 320, 120, 90);
        var imgDataC = ctx.getImageData(280, 320, 120, 90);
        applyBrightness(imgDataC.data, -50);
        ctx.putImageData(imgDataC, 280, 320);



        function truncateColor(value) {
          if (value < 0) {
            value = 0;
          } else if (value > 255) {
            value = 255;
          }
          return value;
        }

        function applyContrast(data, contrast) {
          factor = (259.0 * (contrast + 255.0)) / (255.0 * (259.0 - contrast));
            for (var i = 0; i < data.length; i = 4) {
              data[i] = truncateColor(factor * (data[i] - 128.0) + 128.0);
              data[i + 1] = truncateColor(factor * (data[i + 1] - 128.0) + 128.0);
              data[i + 2] = truncateColor(factor * (data[i + 2] - 128.0) + 128.0);
            }
        }

        ctx.drawImage(gambar, 490, 320, 90, 120);
        var imgDataD = ctx.getImageData(490, 320, 90, 120);
        applyContrast(imgDataD.data, 100);
        ctx.putImageData(imgDataD, 490, 320);
      }
    </script> 
  </body>
</html>