Solucionado (ver solución)
Solucionado
(ver solución)
4
respuestas

Duda: Cambiar posición del Canvas en la pantalla

Un saludo a todos los futuros Dev's. Mi duda es: ¿Cómo cambiar la posición del Canvas en la pantalla? Por ejemplo, que se ubique a partir de la posición 300, 100; o que se ubique en el centro de la pantalla. Muchas gracias de antemano por sus respuestas.

4 respuestas

Hola Cesar, al momento de utilizar la funcion fillReact(x,y,w,h) recibe 4 parámetros: x: el eje x (plano carteciano) y: el eje y (plano carteciano) w: ancho h: altura

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");
    pincel.fillStyle = "Grey";
    pincel.fillRect(20,30,600,400);

en el código de ejemplo le esta diciendo que se ubique en x:20 y en y:30 y que tenga tamaño de 600x400, entonces si quieres ubicar en 300 y 100 tendrías que hacer lo siguiente

    pincel.fillRect(300,100,600,400);

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Saludos!

Hola Rossio, primero que nada agradecerte por tomar parte de tu tiempo en responder. Como lo indicas, para dibujar un rectángulo en la pantalla se deben ubicar primero las coordenadas, teniendo en cuenta que la posición (0,0) se ubica en la esquina superior izquierda del área definida (canvas), luego se indican los parámetros de ancho y altura, recordando también que el rectángulo se dibuja dentro del canvas definido previamente. Aquí se dibuja como si estuviéramos en el IV cuadrante del Plano Cartesiano (hacia la derecha y hacia abajo). Sin embargo, mi duda es como ubicar el canvas en otra posición de la pantalla (por defecto se ubica en la esquina superior izquierda). En el siguiente ejemplo determino el canvas de ancho 800 y altura 500

<canvas width = "800" height = "500"></canvas>

Pero no determino la posición en la pantalla. Lo que deseo es ubicar mi canvas ("área de dibujo") en otra posición específica de la pantalla que no sea la posición (0,0), (claro, menos el margen de la ventana del navegador), o donde se encuentre luego del código HTML.

solución!

Ah para eso caso ya entramos haciendo uso de style. Y se detalla en el siguiente curso que es HTML5 y CSS3

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

Saludos! :)

Muchas gracias Rossio, saludos! :)