Breaking News: Grepper is joining You.com. Read the official announcement!

resize canvas javascript

Add Answer

I_Like_Cats__ answered on January 19, 2022 Popularity 9/10 Helpfulness 3/10

answer resize canvas javascript

related resize canvas

related canvas resize canvas

resize canvas javascript

Comment

const canvas = document.getElementById('yourCanvas');
canvas.width = 200; // Use document.documentElement.clientWidth for full page width!
canvas.height = 200; // Use document.documentElement.clientHeight for full page height!

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: canvas javascript resize

Link to this answer
Share Copy Link

Contributed on Jan 19 2022

I_Like_Cats__

0 Answers Avg Quality 2/10

Closely Related Answers

resize canvas

Comment

"use strict";

function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  var canvas = document.querySelector("#canvas");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    return;
  }

  // setup GLSL program
  var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);
  gl.useProgram(program);

  // look up where the vertex data needs to go.
  var positionAttributeLocation = gl.getAttribLocation(program, "a_position");

  // lookup uniforms
  var colorLocation = gl.getUniformLocation(program, "u_color");
  var matrixLocation = gl.getUniformLocation(program, "u_matrix");

  // Create a buffer to put three 2d clip space points in
  var positionBuffer = gl.createBuffer();

  // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

  requestAnimationFrame(drawScene);

  // Draw the scene.
  function drawScene(now) {
    now *= 0.001;  // convert to seconds

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    // Clear the canvas.
    gl.clear(gl.COLOR_BUFFER_BIT);

    // Tell it to use our program (pair of shaders)
    gl.useProgram(program);

    // Turn on the attribute
    gl.enableVertexAttribArray(positionAttributeLocation);

    // Bind the position buffer.
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

    // Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
    var size = 2;          // 2 components per iteration
    var type = gl.FLOAT;   // the data is 32bit floats
    var normalize = false; // don't normalize the data
    var stride = 0;        // 0 = move forward size * sizeof(type) each iteration to get the next position
    var offset = 0;        // start at the beginning of the buffer
    gl.vertexAttribPointer(
        positionAttributeLocation, size, type, normalize, stride, offset);

    // Set Geometry.
    var radius = Math.sqrt(gl.canvas.width * gl.canvas.width + gl.canvas.height * gl.canvas.height) * 0.5;
    var angle = now;
    var x = Math.cos(angle) * radius;
    var y = Math.sin(angle) * radius;
    var centerX = gl.canvas.width  / 2;
    var centerY = gl.canvas.height / 2;
    setGeometry(gl, centerX + x, centerY + y, centerX - x, centerY - y);

    // Compute the matrices
    var projectionMatrix = m3.projection(gl.canvas.width, gl.canvas.height);

    // Set the matrix.
    gl.uniformMatrix3fv(matrixLocation, false, projectionMatrix);

    // Draw in red
    gl.uniform4fv(colorLocation, [1, 0, 0, 1]);

    // Draw the geometry.
    var primitiveType = gl.LINES;
    var offset = 0;
    var count = 2;
    gl.drawArrays(primitiveType, offset, count);

    requestAnimationFrame(drawScene);
  }
}

// Fill the buffer with a line
function setGeometry(gl, x1, y1, x2, y2) {
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
          x1, y1,
          x2, y2]),
      gl.STATIC_DRAW);
}

main();

Popularity 9/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: canvas ca

Link to this answer
Share Copy Link

Contributed on Jul 14 2022

xcv

0 Answers Avg Quality 2/10

canvas resize canvas

Comment

var img_new = document.createElement("canvas") // Create New image
// Set New Size
img_new.width = 224  
img_new.height = 224

img_context = res.getContext("2d")
img_context.drawImage(orginal_image, 0, 0, 224, 224)//Fill new picture using orginal img
// chick img_new if True
// like that (base64)
console.log(img_new.toDataURL())

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: canvas javascript resize

Link to this answer
Share Copy Link

Contributed on Apr 29 2022

Atlantes Land

0 Answers Avg Quality 2/10

canvas resize canvas

Comments(1)

function imresize(org_img,w,h) {
    var img_new = document.createElement("canvas") // Create New image
    // Set New Size
    img_new.width  = w  
    img_new.height = h
    img_context = res.getContext("2d")
    img_context.drawImage(org_img, 0, 0, w, h)//Fill new picture using orginal img
    // use img_new 
    return img_new;
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: canvas javascript resize

Link to this answer
Share Copy Link

Contributed on Apr 29 2022

Atlantes Land

0 Answers Avg Quality 2/10

resize canvas javascript

Contents

More Related Answers

resize canvas javascript

Closely Related Answers

resize canvas

canvas resize canvas

canvas resize canvas

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.